地图API和MarkerClusterer(Maps API & MarkerClusterer)

2019-10-18 13:51发布

我试图让markerclusterer了一些数据,我取出一个SQL数据库的工作。 它是当前显示的地图,但不销。 如果我console.log标记变种,我结束了一大堆与VI的值通过索引组织对象的行。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script src="jqueryui/js/jquery-1.9.0.js" type="text/javascript"></script>
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?key=AIzaSyC3HDl1QHs4Gq_hEW-K60bentHuZlT5_8s&sensor=false">
    </script>

        <script type="text/javascript">
      var script = '<script type="text/javascript" src="markerclusterer';
      if (document.location.search.indexOf('compiled') !== -1) {
        script += '_compiled';
      }
      script += '.js"><' + '/script>';
      document.write(script);
    </script>
    <script type="text/javascript">

          var markers = [];
    $.getJSON('getLatLon.php',{ajax:'false'},function(jsonData){
        $(jsonData).each(function(){
          var latLng = new google.maps.LatLng(this.lat,this.lon);
          var marker = new google.maps.Marker({'position': latLng});
          markers.push(marker);
        });
    });  

      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(41.611143, -86.722719),
          zoom: 4,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);



var markerCluster = new MarkerClusterer(map, markers);
}

      google.maps.event.addDomListener(window, 'load', initialize);


    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>

getLatLon返回这一点,虽然多了很多行。

        [
        {
            "zip": "H8R 3W4",
            "lat": -73.65,
            "lon": 45.43
        },
        {
            "zip": "H8R 3W4",
            "lat": -73.65,
            "lon": 45.43
        }
            ]

Answer 1:

你需要把标记插入该MarkerClusterer他们在AJAX回调加载后。

$.getJSON('getLatLon.php',{ajax:'false'},function(jsonData){
    $(jsonData).each(function(){
      var latLng = new google.maps.LatLng(this.lat,this.lon);
      var marker = new google.maps.Marker({'position': latLng});
      markers.push(marker);
    });
    var markerCluster = new MarkerClusterer(map, markers);
}); 

您可能希望他在全球(或至少较大)范围markerClusterer,但至少应该显示标记。



文章来源: Maps API & MarkerClusterer