Question

我在Filemaker的db文件上使用markerCLusterer V3，根据地址生成当前传送位置的（半实时）映射。从谷歌抓住lat / long并填充它们字段没问题。通过markerClusterer生成地图是没有问题的。我甚至在本地托管JS，以便我可以更改maxZoom变量以将群集分开，超过最大缩放，这样我就可以看到多个标记。但是，如果标记处于完全相同的纬度/经度，我只能看到输入的最后一个。我想将OverlappingMarkerSpiderfier集成到这个JS中，以便在我放大maxZoom后，标记将“蜘蛛”分开以查看标记（例如，多个设备被传送到同一地址）。我在网上找不到有关如何执行此操作的任何信息。它要么那么简单，我要错过它，或者还没有完成。在此先感谢您的帮助！

Answer 1

我正在使用： MarkerClustererPlus-2.0.14和 OverlappingMarkerSpiderfier版本 - ??

首先只有聚类工作，单击一个聚类，放大但完全相同的点上的2个或更多个标记仍然保持聚类，即使放大到最大值。不幸的是没有蜘蛛侠出现:-(。

但是注意到了markerClusterPlus上的setMaxZoom（）方法。当设置这个适当的缩放级别（对我来说是15）时，蜘蛛侠会超出缩放级别。它看起来像markerClusters说这不再是我的事，因为它取决于蜘蛛侠:-)。

Answer 2

设置最大缩放将解决问题：

minClusterZoom = 14;
markerCluster.setMaxZoom(minClusterZoom);

但是出于查看目的，您可能想要创建一个clusterclick侦听器，以防止它在同一位置的点集群上非常靠近地放大（单击一个集合设置地图的边界以覆盖集群中的点;如果所有点都在同一个位置，它将一直放大，这看起来很糟糕）：

google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
    map.fitBounds(cluster.getBounds()); // Fit the bounds of the cluster clicked on
    if( map.getZoom() > minClusterZoom+1 ) // If zoomed in past 15 (first level without clustering), zoom out to 15
        map.setZoom(minClusterZoom+1);
});

Answer 3

将Spiderfier JS集成到markerClusterer

从here

oms.min.js

从here

markerClusterer.js

图片

为了使两者协同工作，您只需要将maxZoom添加到clusterMarker对象

 new MarkerClusterer(map, clusterMarker, {imagePath: 'images/m', maxZoom: 15});

（Zoomlevel 0是完整的地球，20非常接近地面）。这意味着如果您进一步缩放到地图缩放级别15（例如，如果单击群集），则不再显示群集。如果您现在单击位于完全相同位置（或彼此接近）的标记，Spiderfier JS将触发。

现在是一个最小的工作示例。我在代码中做了一些评论，所以我认为它不言自明，但这里有一些事情需要提及：

用您的api密钥替换YOUR_API_KEY
确保在加载google maps api

oms.min.js

示例：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script     src="https://maps.googleapis.com/maps/apijs?key=YOUR_API_KEY">
  </script>
  <script src="oms.min.js"></script>
  <script src="markerclusterer.js"></script>
  <script>
    window.onload = function() {
      // cluster marker
      var clusterMarker = [];

      var map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng( 50, 3),
        zoom: 6,
        mapTypeId: 'terrain'
      });

      // Create infowindow
      var infoWindow = new google.maps.InfoWindow();

      // Create OverlappingMarkerSpiderfier instsance
      var oms = new OverlappingMarkerSpiderfier(map,
        {markersWontMove: true, markersWontHide: true});

      // This is necessary to make the Spiderfy work
      oms.addListener('click', function(marker) {
        infoWindow.setContent(marker.desc);
        infoWindow.open(map, marker);
      });

      // Some sample data
      var sampleData = [{lat:50, lng:3}, {lat:50, lng:3}, {lat:50, lng:7}];


      for (var i = 0; i < sampleData.length; i ++) {

        var point = sampleData[i];
        var location = new google.maps.LatLng(point.lat, point.lng);

        // create marker at location
        var marker = new google.maps.Marker({
          position: location,
          map: map
        });

        // text to appear in window
        marker.desc = "Number "+i;

        // needed to make Spiderfy work
        oms.addMarker(marker);

        // needed to cluster marker
        clusterMarker.push(marker);
      }

      new MarkerClusterer(map, clusterMarker, {imagePath: 'images/m', maxZoom: 15});
    }
  </script>
</head>
<body><div id="map" style='width:400px;height:400px;'></div></body></html>

<强>建议

如果您从头开始，我建议使用JS Libary Leaflet。因为这个库为您提供了 LeafletMarkerCluster 插件，它基本上是集成了Spiderfier的标记集群，还有很多其他很酷的东西。

优势：

群集看起来很不错
Leaflet真的很容易使用，看起来很漂亮
您不需要自定义代码，因为Spiderfier和markerCluster已经集成了
其他一些奇特的东西：就像显示标记扩散区域的悬停边界一样。
您可以自由选择地图图块提供商，不再受谷歌地图限制（possible providers here）

Downsites：

您可能需要投入30分钟来学习和使用Leaflet API而不是Google API
如果您想使用Google地图图块，则需要使用此plugin，因为您只能在使用Google API时使用Google图块。此插件是Google API的包装。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
  <link rel="stylesheet" href="leaflet/dist/MarkerCluster.css" />
  <link rel="stylesheet" href="leaflet/dist/MarkerCluster.Default.css" />
  <script src="leaflet/dist/leaflet.markercluster-src.js"></script>
  <script>
    $(document).ready(function(){

    var tiles = L.tileLayer(***);//Depending on your tile provider

    var map = new L.Map('map', {center: latlng, zoom: 1, layers: [tiles]});

    var markers = new L.MarkerClusterGroup({
      removeOutsideVisibleBounds: true,
      spiderfyDistanceMultiplier: 2,
      maxClusterRadius: 20
    });
    var markersList = [];

    var sampleData = [{lat:50, lng:3}, {lat:50, lng:3}, {lat:50, lng:7}];

    for (var i = 0; i < sampleData.length; i ++) {

      var point = sampleData[i];
      var location = new L.LatLng(point.lat, point.lng);

      // create marker at location

      var m = new L.Marker(location);
      m.bindPopup("Number" +i); //Text to appear in window
      markersList.push(m);
      markers.addLayer(m);
    }

    var bounds = markers.getBounds();
    map.fitBounds(bounds)
    map.addLayer(markers);
}    
</head>
<body><div id="map" style='width:400px;height:400px;'></div></body></html>

Answer 4

我发现这篇文章是因为我一直在寻找同样的东西，但幸运的是我让它发挥了作用！

老实说，我没有做任何特别的事情，我遵循了MarkerClusterer的集成指南，然后按照OverlappingMarkerSpiderfier的集成指南进行了完美的工作。

当我点击/放大同一地址的一组属性时，最初它只显示“顶部”标记，但是当我点击它时，它们就像你想要它们一样Spiderfy！ / p>

当您尝试一起使用这两个脚本时，您获得了什么具体结果？

Answer 5

 var markerClusterer = new MarkerClusterer(map, myMarkers, {
 maxZoom: 15,
 zoomOnClick: false
   });
//zoom 0 corresponds to a map of the Earth fully zoomed out, 20 is closeup
//markerCluster goes away after zoom 
//turn off zoom on click or spiderfy won't work

将Spiderfier JS集成到markerClusterer V3中以爆炸具有完全相同的长/纬度的多标记

5 个答案: