来自php和mysql的googlemaps上的多个标记答案

【问题标题】：multiple marker on googlemaps from php and mysql来自php和mysql的googlemaps上的多个标记
【发布时间】：2017-03-30 07:12:06
【问题描述】：

我尝试在 googlemaps 上制作多个标记并从数据库中获取数据。这是我的代码

<script>
<?php 


$query =  $db->query('SELECT * FROM tbl_kabkot WHERE 1=1 AND latitude !=0 AND longitude !=0');
  while($row = $query->fetch()){                            

                               $nama_kabkot = $row[nama_kabkot];
                               $longitude = $row[longitude];                              
                               $latitude = $row[latitude]; 


 ?>
      var markers = [
                      [<?= $nama_kabkotv ?>, <?= $latitude ?>, <?= $longitude ?>]
];
<?php } ?>

function initMap() {
    var latlng = new google.maps.LatLng(-33.92, 151.25);
    var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };
    var map = new google.maps.Map(document.getElementById("peta"),myOptions);
    var infowindow = new google.maps.InfoWindow(), marker, i;
    for (i = 0; i < markers.length; i++) {  
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(markers[i][1], markers[i][2]),
            map: map
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(markers[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
}
</script>

但是这段代码只显示了数据库中的一个值。如何在数据库中显示多个标记？

【问题讨论】：

请不要只链接到您的代码，而是包含一个可以在问题中显示您的问题的代码的 sn-p。

标签： javascript php mysql google-maps

【解决方案1】：

由于1=1，初始 sql 查询有一个多余的where 子句，但我认为这是为了测试。原始代码中的 markers 变量在循环的每次迭代中都会被覆盖，因此数组将只有一项。

<?php
    /* lat/lng data will be added to this array */
    $locations=array();
    $query =  $db->query('SELECT * FROM tbl_kabkot WHERE 1=1 AND latitude !=0 AND longitude !=0');
        while( $row = $query->fetch() ){

            $nama_kabkot = $row['nama_kabkot'];
            $longitude = $row['longitude'];                              
            $latitude = $row['latitude'];

            /* Each row is added as a new array */
            $locations[]=array( 'name'=>$nama_kabkot, 'lat'=>$latitudem, 'lng'=>$longitude );
        }
        /* Convert data to json */
        $markers = json_encode( $locations );
?>
<script type='text/javascript'>
    <?php
        echo "var markers=$markers;\n";

    ?>

    function initMap() {

        var latlng = new google.maps.LatLng(-33.92, 151.25);
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false
        };

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

        for( var o in json ){

            lat = json[ o ].lat;
            lng=json[ o ].lng;
            name=json[ o ].name;

            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>

【讨论】：

如何将默认加载位置设置为我的地理位置
你可以使用分配给navigator.geolocation.getCurrentPosition的回调函数~更多developer.mozilla.org/en-US/docs/Web/API/Geolocation_API见这里
谢谢，我还有一个疑问，在设置信息窗口时遇到问题，我从数据库中检索到多个数据，它们是每个位置提供的服务名称。但只有第一个服务名称显示在信息窗口中。我该怎么做
你能做的最好的事情是用所有相关代码问你自己的问题，而不是作为对别人的问题和答案的评论......但是在这里回答你 - 不可能说因为没人知道你的数据结构！
这个问题我已经问过了，没人帮我，这是链接stackoverflow.com/questions/60544486/…

【解决方案2】：

<script>

  // The following example creates complex markers to indicate beaches near
  // Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
  // to the base of the flagpole.

  function initMap() {


     var markerscenter = [
    ['Bondi Beach', -33.890542, 151.274856,],
    ['Bondi Beach2', -33.90542, 151.2748,]

  ];

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 10,
      center: {lat:Number(markerscenter[0][0]), lng:Number(markerscenter[0][1])}
    });

    setMarkers(map);
  }

  // Data for the markers consisting of a name, a LatLng and a zIndex for the
  // order in which these markers should display on top of each other.


   var markers = [
    ['Bondi Beach', -33.890542, 151.274856,],
    ['Bondi Beach2', -33.90542, 151.2748,]

  ];                        
// Info Window Content
var infoWindowContent = [
   'desc1','desc2'

  ];               

  function setMarkers(map) {

    var image = 'markeimage.png';



     var infoWindow = new google.maps.InfoWindow(), marker, i;
    for (var i = 0; i < markers.length; i++) {


      //var beach = beaches[i];
      var marker = new google.maps.Marker({
        position: {lat:Number(markers[i][0]), lng: Number(markers[i][1])},
        map: map,
        icon: image,

      });

    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
        return function() {
            infoWindow.setContent(infoWindowContent[i][0]);
            infoWindow.open(map, marker);
        }
    })(marker, i));
    }

  }
</script>

【讨论】：