多个标记未显示在Google地图上

Question

我是Web开发的新手。 对于我的论文项目，我必须在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=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();

在设置内容之前。

多个标记未显示在Google地图上

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-06-02 18:39:17

多个标记未显示在Google地图上

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-06-02 18:39:17

解决方案1
0 已采纳 2017-06-02 18:39:17