mysql标记不在地图上显示

Question

晚安，即时尝试在JSON地图上显示标记，但我不能和我不知道为什么，我可以看到地图，并可以移动它，但即使没有一个标记正显示出，

<?php 
require("config.php"); 
/* lat/lng data will be added to this array */ 
$locations=array(); 
$query = $db->query('SELECT * FROM inmuebles'); 
    while($row = $query->fetch()){ 

     $longitude = $row['long'];        
     $latitude = $row['lat']; 

     /* Each row is added as a new array */ 
     $locations[]=array('lat'=>$latitude, 'long'=>$longitude); 
    } 
    /* Convert data to json */ 
    $markers = json_encode($locations); 

    echo $markers; 
    ?> 
<script type='text/javascript'> 
<?php 
    echo "var markers=$markers;\n"; 

?> 
var map; 
    var markersArray = []; 

function initMap() { 

    var latlng = new google.maps.LatLng(-16.5338955,-68.0656364); 
    var myOptions = { 
     zoom: 13, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 
    var infowindow = new google.maps.InfoWindow(), marker, lat, long; 
    var json=JSON.parse(markers); 

    for(var o in json){ 

     lat = json[ o ].lat; 
     long=json[ o ].long; 

     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(lat,long), 
      map: map 
     }); 
     google.maps.event.addListener(marker, 'click', function(e){ 
      infowindow.setContent(this.name); 
      infowindow.open(map, this); 
     }.bind(marker)); 
    } 
} 
</script> 

的$标记输出

[{"lat":"-16.52629052070058","long":"-68.0797004699707"},{"lat":"-16.500122130208325","long":"-68.12089920043945"},{"lat":"-16.54307592346882","long":"-68.06425094604492"}] 

在此先感谢我一直在试图真的很难看到那里的错误是

编辑

<?php 
$con = mysqli_connect('localhost','waru','olairhead154','inmueble'); 
?> 
<?php 
require("config.php"); 
/* lat/lng data will be added to this array */ 
$locations=array(); 
$query = $db->query('SELECT * FROM inmuebles'); 
    while($row = $query->fetch()){ 

     $longitude = $row['long'];        
     $latitude = $row['lat']; 

     /* Each row is added as a new array */ 
     $locations[]=array('lat'=>$latitude, 'long'=>$longitude); 
    } 
    /* Convert data to json */ 
    $markers = json_encode($locations); 


    echo $markers; 
?> 
<script type='text/javascript'> 
<?php 
    echo "var markers=$markers;\n"; 

?> 
var map; 
    var markersArray = []; 

function initMap() { 

    var latlng = new google.maps.LatLng(-16.5338955,-68.0656364); 
    var myOptions = { 
     zoom: 13, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
    }; 
    var markers = '<?= json_encode($markers) ?>'; 
    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 
    var infowindow = new google.maps.InfoWindow(), marker, lat, long; 
    var json=markers; 
    for(var o in json){ 

     lat = json[ o ].lat; 
     long=json[ o ].long; 

     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(lat,long), 
      map: map 
     }); 
     google.maps.event.addListener(marker, 'click', function(e){ 
      infowindow.setContent(this.name); 
      infowindow.open(map, this); 
     }.bind(marker)); 
    } 
} 
google.maps.event.addDomListener(window, "load", initMap); 
</script> 

这是我所做的更改，但仍然没有显示即时通讯真正的新这个标记请

感谢

Answer 1

这是更好，如果你只是附和你的$我耐心标记 in var markers连同json_encode（）函数。之后，您可以创建一个新的js变量var markersJson并且值为JSON.parse（markers）（您需要将其解析为JSON，否则会给您一个错误）。从那里，您可以使用javascript .map（）函数（高阶函数）遍历数组，并将其显示为Google Maps标记。

有关Google地图标记的详细信息，请检查this链接。

样品从表inmuebles坐标：

<?php 
    $markers = array( 
     array('lat' => -16.52629052070058, 'lng' => -68.0797004699707), 
     array('lat' => -16.500122130208325, 'lng' => -68.12089920043945), 
     array('lat' => -16.54307592346882, 'lng' => -68.06425094604492) 
    ); 
?> 

回声$标记与json_encode（）为VAR标记：

var markers = '<?= json_encode($markers) ?>'; 

解析标记为JSON：

var markersJson = JSON.parse(markers); 

迭代通过数组并显示坐标为Google地图标记

var plotMarkers = markersJson.map(function(value, index){ 
var marker = new google.maps.Marker({ 
    position : new google.maps.LatLng(value.lat, value.lng), 
    map: map, 
    title : 'Hello' 
}); 
return marker; 
}); 

整个代码在这里：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Google Maps - PHP Markers Implementation</title> 
     <style type="text/css"> 
      html,body { 
       height:100%; 
      } 
      body { 
       width:100%; 
      } 
      #map_canvas { 
       width:100%; 
       height:100%; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="map_canvas"></div> 
     <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script> 
     <script type="text/javascript"> 
      <?php 
       $markers = array( 
        array('lat' => -16.52629052070058, 'lng' => -68.0797004699707), 
        array('lat' => -16.500122130208325, 'lng' => -68.12089920043945), 
        array('lat' => -16.54307592346882, 'lng' => -68.06425094604492) 
       ); 
      ?> 
      function initMap() { 
       var markers = '<?= json_encode($markers) ?>'; 
       var markersJson = JSON.parse(markers); 
       var latlng = new google.maps.LatLng(-16.5338955,-68.0656364); 
       var myOptions = { 
        zoom: 13, 
        center: latlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
       }; 
       var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 
       var plotMarkers = markersJson.map(function(value, index){ 
        var marker = new google.maps.Marker({ 
         position : new google.maps.LatLng(value.lat, value.lng), 
         map: map, 
         title : 'Hello' 
        }); 
        return marker; 
       }); 
      } 
     </script> 
    </body> 
</html>