Question

我是webdeveloping的新手。对于我的论文项目，我必须在谷歌地图上使用标记。我试图从sql数据库获取经度和经度，并使用jason解析和JS我试图在谷歌地图上放置多个标记。但是标记没有显示在地图上。我不明白我的错误在哪里。请让我知道解决方案。完整的代码如下。

`

$sql = "SELECT * FROM potholes";
$data = mysqli_query($db->getDb(), $sql);

foreach ($data as $key)
{
            $locations[]=array( 'name'=>'Potholes', 'lat'=>$key['lat_p'], 'lng'=>$key['longi_p'] );
}
/* Convert data to json */
$markers = json_encode( $locations );

＆GT;

<html>
  <head>
    <style>
      #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script type='text/javascript'>
    <?php
        echo "var markers=$markers;\n";
    ?>

    function initMap() {

        var latlng = new google.maps.LatLng(23.7654627,90.4373187); // default location
        var myOptions = {
            zoom: 14,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false
        };

        var map = new google.maps.Map(document.getElementById('map'),myOptions);
        var infowindow = new google.maps.InfoWindow();
        var json=JSON.parse( markers );
        length = json.length;
    for (var i = 0; i < length; i++) 

        {
            var data = json[i],
                latLng = new google.maps.LatLng(data.lat, data.lng);

            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                title: data.name
            });


            (function(marker, data) {
                google.maps.event.addListener(marker, "click", function(e) {
                    infoWindow.setContent(data.name);
                    infoWindow.open(map, marker);
                });


            })(marker, data);

      }
    }
    </script>

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyACIJl5Uv3RD1vvQJmlXTToi9THhUpQXxU&callback=initMap"
    type="text/javascript"></script>
  </body>
</html>`

Answer 1

你有这个：

<?php
    echo "var markers=$markers;\n";
?>

由于$markers是JSON，因此您无需解析它。替换

var json=JSON.parse( markers );

与

var json = markers;

至于infoWindow，添加

let infoWindow = new google.maps.InfoWindow();

在设置内容之前。

谷歌地图上没有显示多个标记

1 个答案: