来自 MySQL 数据库的 Google 地图上的多个标记未显示答案

【问题标题】：Multiple markers on Google Maps from MySQL database not showing来自 MySQL 数据库的 Google 地图上的多个标记未显示
【发布时间】：2018-02-14 19:40:28
【问题描述】：

我正在尝试在 googlemap 上显示来自 mysql 的多个标记。

我的地图显示正确，但标记未显示。

我有一个从 mysql 检索数据的 php 脚本。

php:

<?php

    // Include config file

    require_once 'config.php';

    $sql = "SELECT client_address, GPS1, GPS2 FROM client";
    $stmt = $mysqli->prepare($sql);
    if($stmt->execute()){
       $result = $stmt->get_result();
   } else $stmt->close();

   foreach ($result as $key)
        $locations[]=array('client_address'=>$key['client_address'], 'GPS1'=> $key['GPS1'], 'GPS2'=> $key['GPS2']);
    $markers = json_encode( $locations );
?>

$标记：

[{"client_address":"SA294","GPS1":"-34.031300","GPS2":"18.577680"},{"client_address":"SB619","GPS1":"-34.031510","GPS2":"18.575890"}]

html:

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

                function initMap() {
                var latlng = new google.maps.LatLng(-34.031342, 18.577419); // default location
                var myOptions = {
                    zoom: 16,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.SATELLITE,
                    mapTypeControl: true
                };

            var map = new google.maps.Map(document.getElementById('mapall'),myOptions);
                var infowindow = new google.maps.InfoWindow(), marker, lat, lng;
                var json=JSON.parse( markers );

                for( var i in json ){

                    lat = (json[i].GPS1);
                    lng = (json[i].GPS2);
                    name = (json[i].client_address);

                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(lat,lng),
                        name:name,
                        map: map
                    }); 
                    google.maps.event.addListener( marker, 'click', function(e){
                        infowindow.setContent( this.name );
                        infowindow.open( map, this );
                    }.bind( marker ) );
                }
            }

            </script>
            <script async defer
                src="https://maps.googleapis.com/maps/api/js?key=AIzaSyANS0uqM7qedfDCzPjJ3xoB15vh2DC4Tls&callback=initMap">
             </script>

<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading"><b>Siqalo Active Units</b></div>
<div class="panel-body">
<div id="mapall" style="width:350px;height:350px;"></div> 
</div>
</div>    
</div>
</div>

我主要基于： Adding multiple markers on Google Maps from MySQL database

【问题讨论】：

标签： php jquery mysql json google-maps-api-3

【解决方案1】：

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

这太疯狂了。几乎可以这样做，因为您已经在解析 JSON 字符串，这应该可以工作并且看起来更干净。

         <script>

            var markers='<?=$markers;?>';


            function initMap() { ...

【讨论】：

【解决方案2】：

你不需要做 JSON.parse，你可以通过 json 标记循环。

for( i = 0; i < markers.length; i++ ) {
    lat = (markers[i].GPS1);
    lng = (markers[i].GPS2);
    name = (markers[i].client_address);

【讨论】：