Question

这里有OverlappingMarkerSpiderfier的示例，使用重叠标记Spiderfier，它是基于距离的重叠标记，有没有办法根据区域实现相同的效果，例如一个国家的所有标记重叠并显示为一组标记和点击相同的make后扩展。

已编辑

我有搜索堆栈溢出和谷歌的可能性，但没有找到任何解决方案，如果任何人有关于如何手动使用标记管理器使用多边形/区域的群集的想法/小提琴也有帮助。

Answer 1

以前在Stack Overflow上....

我的标记聚类方法

我接受这一挑战的方法是遵循@geocodezip建议。我会使用他在https://stackoverflow.com/a/15422677/1337392中提供的答案创建区域地图。

每个地区都知道它有哪些标记。此外，如果您想要关注principle of least carnality，您还可以让每个标记知道它所属的区域。要实现这一点，我会使用MarkerLibs或类似的东西。

一旦我们知道每个标记所属的位置，就可以直接对它们进行分组。再一次，@ geocodezip提出了一个很好的来源https://developers.google.com/maps/articles/toomanymarkers，但是，我建议谨慎，因为其中一些库已经过时并且已经停产（上次我几个月前检查过）。

你也可以在这一个中全部Rambo mode并自己编码。基本上，您需要一个listener for the zoom level，每次缩小时，您都可以计算出是否要对所述区域内的所有制造商进行分组。

将所述标记分组将意味着隐藏它们，并且在它们的位置（您可以计算几何中心）放置一个new (custom) marker来表示一个组。

我目前没有代码，但我希望我的详细解释可以帮助你解决这个问题。

区域标记聚类的错觉

＆＃34;现实就是当你停止相信它时，它不会消失。＆＃34;

Philip K. Dick

用户查看标记聚类的最简单方法是不进行标记聚类。

我们可以根据缩放级别隐藏和显示标记，而不是聚类标记，从而有效地创建了标记聚类的错觉。

算法/实施例

正如您所看到的，这种方法基于给出标记聚类的假象。

在这个例子中，我拥有葡萄牙的所有区域（按颜色划分），每个区域都有一组POI（兴趣点）。

就个人而言，我强烈建议你去这个美丽的国家，这是我多年的家，你不会后悔（特别是食物！）

现在，每个POI都有一个名称，它所在的坐标以及它所属的区域。这都在数据集中：

const POIS = [{
    district: 'LISBOA',
    name: 'Torre de Belem',
    coords: {
        lat: 38.69383759999999,
        lng: -9.2127885
    }
}, {
    district: 'LISBOA',
    name: 'Mosteiro dos Jeronimos',
    coords: {
        lat: 38.69703519999999,
        lng: -9.2068921
    }
},
...
];

PS：Torre de Belem和Mosteiro非常好！

正如您所看到的，我遵循先前解释过的最小基数原则，并且我在每个POI中添加了它所属的区域（区域）。

这里发生的事情是，当我初始化地图时，我会为每个POI创建一个标记 - 但我不会显示它。

然后，我计算每个区域的centroid（如果你考虑的话，每个区域不超过一个多边形！）我也为每个区域的中心创建了另一个标记（但我又是＃39;显示它）。

何时显示标记？

当用户放大或缩小时。为了帮助我，我最终使用了一个名为markermanager的库，它根据最大和最小缩放级别显示和隐藏标记！

结果是一张地图，为您提供标记聚类的错觉！

为了向示例中添加一些 finesse ，我还使用dynamic pins来计算每个区域中的POI数量，从而进一步增加幻觉。

PS：动态引脚已弃用，但我目前使用它并不知道更好的解决方案。

代码

代码似乎非常大，但是如果你深入研究它，你会发现它很容易。

首先是index.html。此文件包含地图和JavaScript引用的div：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polygon</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA7ZtEnzC81C1TnUI1Ri44JgJJIh5KaltM"></script>
  </head>
  <body>
    <div id="map"></div>
    <script src="markermanager.js"></script>
    <script src="districtData.js"></script>
    <script src="poiData.js"></script>
    <script src="myscript.js"></script>
  </body>
</html>

现在，我们拥有应用程序的核心。 myscript.js文件。此文件使用前面提到的markermaner.js lib，并使用两个数据文件，即poiData.js和districtData.js。

此文件处理地图的无限制，绘制区域多边形，计算每个多边形的质心，并保留标记管理器的初始化。如果有一个函数，我可以告诉你真的很重要，那个函数将是setUpMarkerManager()，其中大部分繁重的工作已经完成。

"use strict";

/*global google*/
/*global DISTRICTS*/
/*global POIS*/
/*global MarkerManager*/

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: 38.184,
      lng: -7.117
    },
    mapTypeId: 'terrain'
  });

  setUpMarkerManager(map);
  drawDistricts(map);
}

//Check https://github.com/googlemaps/v3-utility-library/blob/master/markermanager/docs/reference.html
function setUpMarkerManager(aMap) {
  let mgr = new MarkerManager(aMap);

  let poisPerDistrict = new Map();
  let allPOISArray = [];


  POIS.forEach(element => {

    let poiDistrict = element.district;
    if (poisPerDistrict.has(poiDistrict)) {
      let poiCount = poisPerDistrict.get(poiDistrict) + 1;
      poisPerDistrict.set(poiDistrict, poiCount);
    }
    else
      poisPerDistrict.set(poiDistrict, 1);

    allPOISArray.push(new google.maps.Marker({
      position: new google.maps.LatLng(element.coords.lat, element.coords.lng),
      title: element.name
    }));
  });

  let inverseCenter;
  let disctrictsCenter = [];
  DISTRICTS.forEach(element => {
    inverseCenter = getPolygonCenter(element.coords.coordinates[0]);

    if (poisPerDistrict.get(element.id))

      //For cool markers check https://developers.google.com/chart/image/docs/gallery/dynamic_icons#scalable_pins
      disctrictsCenter.push(new google.maps.Marker({
        position: new google.maps.LatLng(inverseCenter[1], inverseCenter[0]),
        icon: "https://chart.googleapis.com/chart?chst=d_map_spin&chld=0.6|0|FFFFFF|12|_|" + poisPerDistrict.get(element.id),
        title: element.name
      }));
  });

  google.maps.event.addListener(mgr, 'loaded', function() {
    mgr.addMarkers(allPOISArray, 9);
    mgr.addMarkers(disctrictsCenter, 0, 8);
    mgr.refresh();
  });
}

// https://stackoverflow.com/a/37472218/1337392
function getRandomColor() {
  return '#' + Math.random().toString(16).slice(2, 8);
}

function drawDistricts(aMap) {
  let randomColor;

  DISTRICTS.forEach(element => {
    randomColor = getRandomColor();

    new google.maps.Polygon({
      paths: getPolygonCoordinates(element.coords),
      strokeColor: randomColor,
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: randomColor,
      fillOpacity: 0.35,
      map: aMap
    });
  });
}

function getPolygonCoordinates(polygon) {
  let coords = polygon.coordinates[0];
  let result = [];

  coords.forEach(element => {
    result.push({
      lng: element[0],
      lat: element[1]
    });
  });

  return result;
}

//Check https://stackoverflow.com/a/16282685/1337392
//Check https://en.wikipedia.org/wiki/Centroid
function getPolygonCenter(coords) {
  var minX, maxX, minY, maxY;
  for (var i = 0; i < coords.length; i++) {
    minX = (coords[i][0] < minX || minX == null) ? coords[i][0] : minX;
    maxX = (coords[i][0] > maxX || maxX == null) ? coords[i][0] : maxX;
    minY = (coords[i][1] < minY || minY == null) ? coords[i][1] : minY;
    maxY = (coords[i][1] > maxY || maxY == null) ? coords[i][1] : maxY;
  }
  return [(minX + maxX) / 2, (minY + maxY) / 2];
}

initMap();

接下来是图书馆本身，markermanager.js。我可以在这里发布代码，但这已经很长了，所以我只是简单地提到我正在使用v1.1，你可以在official place下载或者检查我之前发布的项目的URL

考虑到这一点，我还会向您提供我的手动制作和手动正确大量数据文件。是的，如果你想知道为什么花了这么长时间，现在你有了一个想法。

通常我会复制并粘贴这里的值，但由于StackOverflow有字符限制，我会将你链接到我们的GitHub帐户。

poiData.js是第一个，你应该看到的所有地方的文件！链接：https://github.com/Fl4m3Ph03n1x/marker-cluster-polygon/blob/master/poiData.js

现在，districtData.js包含每个区域多边形的数据。链接：https://github.com/Fl4m3Ph03n1x/marker-cluster-polygon/blob/master/districtData.js

还有CSS文件，但它确实没什么特别的。

您可以在我的GitHub帐户查看完整的演示/项目： https://github.com/Fl4m3Ph03n1x/marker-cluster-polygon

个人笔记

当我第一次开始这个时，我无法想象它会带我去哪里。

我要说的一件事是，当我开始编码时，我并没有意识到我的初始理论有多接近！事实上，作为一个复活节彩蛋，我可以告诉你，我最初为这个答案做了一个不同的帖子，因为我认为它与我预测的初始算法非常不同：P

我想这可以告诉你在编写代码之前思考代码会有所回报！

我总体上发现这种方法非常有效，而且创造它确实很有趣并且（很多工作）。使用这种方法的大多数工作都是使用运算数据，但一旦完成，其余的工作就会快速而简单。

我的一部分时间，我可以早点做到这一点以获得赏金，但是因为我喜欢把自己看成是一个信守诺言的人，所以我最终还是这样做并发布了它！

我希望你现在明白为什么我花了这么长时间，但我真的希望这能帮到你！

如何执行Google Maps基于区域的群集或标记重叠

1 个答案:

我的标记聚类方法

区域标记聚类的错觉

算法/实施例

代码

个人笔记