另一个标记周围的谷歌地图标记标记答案

【问题标题】：Google Map marker marker around another marker另一个标记周围的谷歌地图标记标记
【发布时间】：2018-02-11 07:06:54
【问题描述】：

我需要在 google Map 中实现标记，然后单击父地图周围的一些其他标记（或 html div 元素）。如下图所示。

我已经找到https://github.com/jawj/OverlappingMarkerSpiderfier 但不知道如何像下图那样实现它。

【问题讨论】：

标签： html google-maps google-maps-markers

【解决方案1】：

以下是使用 gitHub 库实现的标记聚类器 spidefier。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css">
  <link rel="stylesheet" type="text/css" href="https://bewithjonam.github.io/mapboxgl-spiderifier/lib/mapboxgl-spiderifier.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.js"></script>
  <script type="text/javascript" src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.js"></script>
  <script type="text/javascript" src="https://bewithjonam.github.io/mapboxgl-spiderifier/lib/mapboxgl-spiderifier.js"></script>
  <title>Mapbox gl spiderfier Basic Example</title>
  <style type="text/css">
    #map {
      width: 100%;
      height: 500px;
    }
    .spidered-marker .icon-div{
      position: relative;
      width: 25px;
      height: 41px;
      margin-left: -11.5px;
      margin-top: -38.5px;
      background-image: url(https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2/images/marker-icon.png);
    }
  </style>
  <script type="text/javascript">
    window.onload=function(){
      mapboxgl.accessToken = 'pk.eyJ1Ijoic29jcmF0YSIsImEiOiJjaXJxc2wzam0waGU5ZmZtODhqd2ttamdxIn0.1ZQEByXoDD7fGIa9lUHIqg';
      var map = new mapboxgl.Map({
          container: 'map',
          style: 'mapbox://styles/mapbox/streets-v9',
          center: [-74.50, 40],
          zoom: 7
        }),
        spiderfier = new MapboxglSpiderfier(map, {
          animate: true,
          animationSpeed: 200,
          onClick: function(e, marker){
            console.log(marker);
          }
        });

      map.on('style.load', function() {
        map.addSource('circle', {
          type: 'geojson',
          data: {
            type: 'FeatureCollection',
            features: [
              {type: 'feature',
              properties: {count: 6},
              geometry: {
                type: 'Point',
                coordinates: [-74.50, 40]
              }},
              {type: 'feature',
              properties: {count: 20},
              geometry: {
                type: 'Point',
                coordinates: [-75.50, 40.5]
              }},
              {type: 'feature',
              properties: {count: 50},
              geometry: {
                type: 'Point',
                coordinates: [-76.0, 39.5]
              }}
            ]
          }
        });

        map.addLayer({
          'id': 'circle',
          'type': 'circle',
          'source': 'circle',
          'paint': {
            'circle-radius': 30,
            'circle-color': '#288DC1',
            'circle-opacity': 0.8
          },
        });
        map.on('mousemove', mouseMove);
        map.on('click', mouseClick);
      });

      function mouseClick(e) {
        var features = map.queryRenderedFeatures(e.point, {
            layers: ['circle']
          }),
          count,
          markers;

        if (!features.length) {
          //remove old spiderfy
          return;
        } else {
          count = features[0].properties.count
          markers = _.map(_.range(count), function(index) {
            return {id: index};
          });
          spiderfier.spiderfy(features[0].geometry.coordinates, markers);
        }
      }

      function mouseMove(e) {
        var features = map.queryRenderedFeatures(e.point, {
          layers: ['circle']
        });
        map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
      }
    }
  </script>
</head>
<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">MapboxglSpiderifier</a>
      </div>
    </div>
  </nav>
  <div class="container" style="margin-top: 100px;">
    <p>Click on any blue circle for spiderified markers. On every click, different number of markers will load.</p>
    <div id="map"></div>
  </div>
</body>
</html>

【讨论】：