javascript - mysql 标记未显示在 map 上

Question

晚安，我正在尝试使用 JSON 在 map 上显示标记，但我无法，而且我不知道为什么，我可以看到 map 并可以在其周围移动，但甚至没有显示一个标记，

<?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>

$markers 的输出是

[{"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

如果您将 var 标记 中的 $markers 与 json_encode() 函数一起回显，那就更好了。之后，你可以创建一个新的js变量varmarkersJson，值为JSON.parse(markers)(你需要将其解析为JSON，否则它会给出你犯了一个错误)。从那里，您可以使用 javascript .map() 函数(高阶函数)迭代数组并将其显示为 Google map 标记。

有关 Google map 标记的详细信息，请查看 this 链接。

来自表 inmuibles 的示例坐标:

<?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() 将 $markers 回显为 var 标记:

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

将标记解析为 json:

var markersJson = JSON.parse(markers);

迭代数组并将坐标显示为 Google map 标记

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>