MarkerCluster 谷歌地图没有对我的标记进行分组答案

【问题标题】：MarkerCluster Google map not grouping my markerMarkerCluster 谷歌地图没有对我的标记进行分组
【发布时间】：2015-01-20 15:19:45
【问题描述】：

首先我用 JSON // 得到工作站的位置

JSON 结构：

[{"number":31705,"name":"31705 - CHAMPEAUX (BAGNOLET)","address":"RUE DES CHAMPEAUX (PRES DE LA GARE ROUTIERE) - 93170 BAGNOLET","position":{"lat":48.8645278209514,"lng":2.416170724425901},"banking":true,"bonus":true,"status":"OPEN","contrat _name":"Paris","bike_stands":50,"available_bike_stands":45,"available_bikes":5,"last_update":1416677110000}]

其次，我想用 MarkerCluster 对标记进行分组，但 MarkerCluster 在我的所有标记中
为什么不分组？

function initialize() {

  var mapOptions = {
    center: new google.maps.LatLng(48.859875, 2.342253),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true
  };

  var infoWindow = new google.maps.InfoWindow();
  var mcOptions = {gridSize: 50, maxZoom: 15, minimumClusterSize:10}

  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  $.getJSON("https://api.jcdecaux.com/vls/v1/stations?contract=Paris&apiKey=d98a9b59f1d1999cf1ab909051cc63bd46c66a46", function (data) {
    $.each(data, function (key, data) {

      var markers = [];

      for (var i = 0, length = data.address.length; i < length; i++) {
        var myLatlng = new google.maps.LatLng(data.position.lat, data.position.lng);
        var marker = new google.maps.Marker({
          position: myLatlng
        });

        markers.push(marker);
      }

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

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

【问题讨论】：

请在问题中提供一个 JSON 格式的样本。
我们现在应该更好地理解

标签： javascript google-maps google-maps-api-3 google-maps-markers markerclusterer

【解决方案1】：

您正在为每个标记创建一个新的 MarkerClusterer（如果您缩进代码更容易看到）

将 MarkerCluster 的创建移出 $.each。

还有：

将google.maps.event.addDomListener(window,'load',initialize);移出初始化函数
删除 data.address.length 上的内部循环（除非您的数据需要它，否则不要查看您的所有数据）

function initialize() {

  var mapOptions = {
    center: new google.maps.LatLng(48.859875, 2.342253),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true
  };

  var infoWindow = new google.maps.InfoWindow();
  var mcOptions = {
    gridSize: 50,
    maxZoom: 15,
    minimumClusterSize: 10
  };

  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  $.getJSON("https://api.jcdecaux.com/vls/v1/stations?contract=Paris&apiKey=d98a9b59f1d1999cf1ab909051cc63bd46c66a46", function (data) {
    $.each(data, function (key, data) {
      var myLatlng = new google.maps.LatLng(data.position.lat, data.position.lng);
      var marker = new google.maps.Marker({
        position: myLatlng
      });
      markers.push(marker);
    });
    var markerCluster = new MarkerClusterer(map, markers, mcOptions);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

working fiddle（带有修改后的数据子集）

【讨论】：