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>