0 

var map;
var Sightings = [
{lat:20.735280,lng:-105.401653,title:"Tournefortia hartwegiana",code:'TOHA',sightingid:'40888'},
{lat:20.735280,lng:-105.401653,title:"Heermann's Gull",code:'HEGU',sightingid:'40869'},
{lat:20.735397,lng:-105.401703,title:"Belted Kingfisher",code:'BEKI',sightingid:'40877'}
];

const sightingIcon = {
    path: "M 0 0 L 4 -4 L 4 -16 L 26 -16 L 26 -34 L -26 -34 L -26 -16 L -4 -16 L -4 -4 Z",
    fillOpacity:1,
    fillColor:"#ffcc00",
    strokeWeight:1,
    strokeColor:"#000",
    scale:1,
    labelOrigin: {x:0, y:-25}
};


    function initMap(){
        map = new google.maps.Map(document.getElementById('GoogleMap'), {mapTypeId: 'satellite',streetViewControl:false,overviewMapControl:true,scaleControl:true});
        var bounds = new google.maps.LatLngBounds();
        var oms = new OverlappingMarkerSpiderfier(map, {markersWontMove: true,markersWontHide: true,basicFormatEvents: true, nearbyDistance: 40, circleSpiralSwitchover: 8, spiralFootSeparation:20, spiralLengthStart: 16, spiralLengthFactor: 12, circleFootSeparation:50, circleStartAngle: 180});
        var markers = new Array();
        for (var i = 0; i < Sightings.length; i++) {
            bounds.extend(Sightings[i]);
            var markerData = Sightings[i];
            var marker = new google.maps.Marker({position:Sightings[i], title: Sightings[i].title, label: Sightings[i].code, opacity: 1, icon: sightingIcon});
            markers.push(marker);
            marker.addListener('spider_click', function(e) {}); 
            oms.addMarker(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers,{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',maxZoom:18});
        map.fitBounds(bounds);
    }
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier/1.0.3/oms.min.js"></script>
<script src='https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js'></script>
<script defer src='https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk'></script>

<body>
<h1>Hello World</h1>
<div id='GoogleMap' style='height: 600px; width: 100%;'></div>
</body>
</html>

我在网页上使用 Google Maps API for Javascript。从我在其他地方找到的示例中使用 Lat/Lng 从数组中创建多个标记，并使用重叠标记蜘蛛和标记集群来实现它们的预期用途。

我的问题是标记在去蜘蛛化/去集群时仍然相互重叠。单击重叠的标记正确地蜘蛛化它们并显示每个。这让最终用户感到困惑，因为他们不知道某些标记被隐藏/重叠并且不点击。

我尝试在 spiderfier 中使用 Nudge 选项，但它们似乎没有效果。

任何想法如何防止这些重叠的标记？为了清楚起见，我正在尝试解决下面第二个屏幕截图中显示的问题，其中标记重叠，但应稍微向一侧轻推以显示多个标记。

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

4

0 回答 0