谷歌地图标记围绕另一个标记

-1

我需要在谷歌地图中实现标记，并在其上点击一些其他标记（或html div元素）在父映射周围。就像在下面的图片中显示一样。谷歌地图标记围绕另一个标记

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

2017-09-02 CodeDezk

以下是使用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>

来源

2017-09-02 12:18:45

谷歌地图标记围绕另一个标记

回答

相关问题