地图 API 和 MarkerClusterer答案

【问题标题】：Maps API & MarkerClusterer地图 API 和 MarkerClusterer
【发布时间】：2013-08-23 17:02:44
【问题描述】：

我正在尝试让 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
        }
            ]

【问题讨论】：

标签： jquery google-maps markerclusterer

【解决方案1】：

在 AJAX 回调中加载标记后，您需要将标记放入 MarkerClusterer。

$.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 在全局（或至少更大）范围内，但这至少应该显示标记。

【讨论】：

好吧，我进行了您建议的编辑，但没有奏效，因为此时 map var 未定义，所以我将整个 $.getJSON 和回调移动到 initialize 函数中并运行没有错误，但仍然没有标记。
哦，没关系，他们就在那里，就在地图底部之外。