Markerclusterer自定义谷歌地图

Markerclusterer customization google maps

本文关键字：谷歌地图 自定义 Markerclusterer      更新时间：2023-09-26

我有一个基本的markcluster示例，它运行得很好。

var center = new google.maps.LatLng(37.4419, -122.1419);
var options = {
  'zoom': 13,
  'center': center,
  'mapTypeId': google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
var markers = [];
for (var i = 0; i < 100; i++) {
  var latLng = new google.maps.LatLng(data.photos[i].latitude,
      data.photos[i].longitude);
  var marker = new google.maps.Marker({'position': latLng});
  markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);

我想做的是按国家对标记进行聚类，然后一旦你点击它，它们仍然会被聚类，直到点击3。目前，它们是集群的，直到你得到一个结果。我有成千上万的标记，希望在点击一次国家/地区，然后再点击一次后可以看到它们。

我在网上寻找解决方案，发现了这个http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/examples/google_northamerica_offices.html

使用这种生产

    var officeLayer = [
  {
    "zoom": [0, 3],
    "places": [
      { "name": "US Offices", "icon": ["us", "flag-shadow"], "posn": [40, -97] },
      { "name": "Canadian Offices", "icon": ["ca", "flag-shadow"], "posn": [58, -101] }
    ]
  },
  ...
};
function setupOfficeMarkers() {
  allmarkers.length = 0;
  for (var i in officeLayer) {
    if (officeLayer.hasOwnProperty(i)) {
      var layer = officeLayer[i];
      var markers = [];
      for (var j in layer["places"]) {
        if (layer["places"].hasOwnProperty(j)) {
          var place = layer["places"][j];
          var icon = getIcon(place["icon"]);
          var title = place["name"];
          var posn = new google.maps.LatLng(place["posn"][0], place["posn"][1]);
          var marker = createMarker(posn, title, getIcon(place["icon"]));
          markers.push(marker);
          allmarkers.push(marker);
        }
      }
      mgr.addMarkers(markers, layer["zoom"][0], layer["zoom"][1]);
    }
  }
  mgr.refresh();
  updateStatus(mgr.getMarkerCount(map.getZoom()));
}

我不知道如何将其实现到我目前所拥有的内容中，也不知道是否需要包含任何其他脚本/库。

您看到的是两个完全不同的库。您的问题是关于MarkerClusterer库的，但您的示例解决方案是关于MarkerManager库的。

MarkerClusterer库根据一种算法自动将标记聚集在一起，该算法试图决定何时太多标记会如此靠近，以至于无法明显区分。你真的无法控制它决定何时以及如何以这种方式将标记合并在一起，所以只要合并发生，当它们如何合并对你来说并不重要时，这个库就是一个想法。由于你想通过政治边界（国家）而不是通过彼此接近来将标记合并在一起，所以这不是适合你的图书馆。

MarkerManager库根本不会自动将标记合并在一起。它所做的是根据当前地图视口的缩放级别选择性地隐藏和显示标记。您需要做的是自己进行合并，然后将所有合并的标记、细节标记和缩放级别添加到MarkerManager中，以便每个标记都可见。进行自己的合并意味着你需要另一种方法来确定每个标记点属于哪个国家。希望您已经知道（或能够获得）这些信息，因为这些库中的任何一个都不会自动提供这些信息。

tl；dr-使用MarkerManager库而不是MarkerClusterer库按国家进行分组，由您确定每个国家的位置以及哪个标记与哪个标记对应。

相关文章：