google 地图上未显示多个标记

Question

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

`

$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 );

?>

<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=YOUR_API_KEY=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();

设置内容前

google 地图上未显示多个标记

Multiple marker is not showing on google map

javascript

php

sql

google-maps-markers