如何使用从 mysql db 获取 lat 和 long 数据在地图上指示多个自定义标记答案

【问题标题】：how to indicate multiple custom marker on map using fetch lat and long data from mysql db如何使用从 mysql db 获取 lat 和 long 数据在地图上指示多个自定义标记
【发布时间】：2017-11-18 11:59:28
【问题描述】：

我尝试从 mysql db 中获取 lat 和 long 值并将这些值传递到谷歌地图上以在地图上显示位置标记

但目前我只获取最后一行数据，因此仅指示一个位置如何在地图上显示所有位置？？

<?php
include "config.php";
$result="select * from ds_duty_history";
$a=mysqli_query($conn,$result);
// $count_row = mysqli_num_rows($a); 
while ($b = mysqli_fetch_array($a)) {
    $long_d=$b['lng'];
    $lat_d=$b['lat'];
    $result = array(array('latitude'=>$lat_d,'longitude'=>$long_d));
}
?>

<!doctype html>
<html>
    <head>
        <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&callback=initMap">
    </script>
        <script type="text/javascript">
        var map;
        function initialize() {
            // Set static latitude, longitude value
            var latlng = new google.maps.LatLng(<?php echo $lat_d; ?>, <?php echo $long_d; ?>);
            // Set map options
            var myOptions = {
                zoom: 16,
                center: latlng,
                panControl: true,
                zoomControl: true,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            // Create map object with options
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        <?php
            // uncomment the 2 lines below to get real data from the db
            // $result = mysql_query("SELECT * FROM parkings");
            // while ($row = mysql_fetch_array($result))
            foreach($result as $row){ // <- remove this line
                echo "addMarker(new google.maps.LatLng(".$row['latitude'].", ".$row['longitude']."), map);";}
        ?>
        }
        function addMarker(latLng, map) {
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                draggable: true, // enables drag & drop
                animation: google.maps.Animation.DROP
            });

            return marker;
        }
        </script>

    </head>
    <body onload="initialize()">
        <div style="float:left; position:relative; width:550px; border:0px #000 solid;">
            <div id="map_canvas" style="width:550px;height:400px;border:solid black 1px;"></div>
        </div>

    </body>
</html>

当前仅显示一个标记，即最后一次获取记录 lat 和 long 分配在地图上如何使用 mysql lat,long 值在地图上显示所有地方？

【问题讨论】：

“最后一行”是指ORDER BY datetime DESC LIMIT 10？
在表中具有纬度和经度值，这些是一个或多个记录，例如不同的地方，我使用这些纬度和经度值在地图上显示位置.....，使用此代码我能够只显示一个地方...，那么如何在地图上显示所有地方？？

标签： javascript php mysql google-maps latitude-longitude

【解决方案1】：

您在这里遇到的主要问题是，您实际上并没有在 $result 变量中收集不同的结果，而是用最新的结果覆盖它。这似乎也是对变量$result 的一些滥用，这可能会导致您的困惑。假设我们声明了一个新的array 并将其命名为$rows。然后我们可以使用以下代码收集所有行（以替换您的第一个 sn-p）：

<?php
include "config.php";

$sql = "SELECT * FROM ds_duty_history";
$result = mysqli_query($conn, $sql);
$rows = [];
while ($row = mysqli_fetch_array($result)) {
    $lon_d = $row['lng'];
    $lat_d = $row['lat'];
    // Use short-cut append syntax here so we add row and don't overwrite $rows
    $rows[] = ['latitude' => $lat_d, 'longitude' => $long_d];
}
?>

现在在您的显示代码（第二个 sn-p）中，您将能够迭代 $rows，就像：

foreach ($rows as $row){ 
    // Do work with each $row here
}

顺便说一句，试着习惯使用尽可能有意义的变量名，并尽可能多地使用新变量。尝试使用像$a 这样的简短通用变量名总是会导致混淆，因为除非您每次都找到声明它的位置，否则您不会知道它代表什么。尝试重用一个变量（就像你对$result 所做的那样）会让你的生活变得更加困难，因为现在即使你找到了对变量的赋值，它也会被赋值很多次并且（你使用它的方式）代表每次完全不同的类型。做这件事会让你更容易掌握编程的窍门，因为至少在阅读你自己的 /em> 代码。

【讨论】：

【解决方案2】：

请尝试使用此代码在地图上显示多个标记

 <script type="text/javascript"> 
      var LocationData = <?php echo json_encode($result); ?>;
      function initialize()
      {
        var myOptions = {zoom:12,mapTypeId: google.maps.MapTypeId.ROAD};
        var map =
        new google.maps.Map(document.getElementById('map-canvas'), myOptions);
        var bounds = new google.maps.LatLngBounds();
        var infowindow = new google.maps.InfoWindow();
        for (var i in LocationData)
        {
          var p = LocationData[i];
          var latlng = new google.maps.LatLng(p[0], p[1]);
          bounds.extend(latlng);

          var icon = { url: '<?php echo base_url();?>assets/frontend/assets/images/location_pin1.png', // url     
            scaledSize: new google.maps.Size(40, 70), // scaled size     
            origin: new google.maps.Point(0,0), // origin     
            anchor: new google.maps.Point(0, 0) // anchor 
          };

          var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            draggable: true, // enables drag & drop
            animation: google.maps.Animation.DROP
            icon: icon
          });


          google.maps.event.addListener(marker, 'click', function() {
            window.location.href = this.url;
          });

        }
        map.fitBounds(bounds);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

【讨论】：

请尽量避免仅仅将代码作为答案，并尝试解释它的作用和原因。对于没有相关编码经验的人来说，您的代码可能并不明显。请编辑您的答案以包含clarification, context and try to mention any limitations, assumptions or simplifications in your answer.
什么是 var LocationData = ;在您的答案代码中？？..我尝试从数据库中获取不同的位置纬度和经度值，并将所有位置显示在地图上。 ..但目前地图上只有一个地点标记显示...，我尝试使用循环显示地图上的所有地点