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>Web ページで Google Maps API for Javascript を使用しています。Lat/Lng を使用して配列から複数のマーカーを作成し、他の場所で見つけた例から、意図した用途に Overlaping-marker-spiderfier と markerclusterer を使用します。
私の問題は、de-spiderfied/de-clustered のときにマーカーがまだ互いに重なっているということです。重なり合ったマーカーをクリックすると、それらが正しくスパイダー化され、それぞれが表示されます。これは、一部のマーカーが非表示/重複していてクリックしないことをエンド ユーザーが認識しないため、混乱を招きます。
Spiderfier の Nudge オプションを使用してみましたが、効果がないようです。
これらのマーカーの重複を防ぐ方法はありますか? 明確にするために、下の 2 番目のスクリーンショットに示すように、マーカーが重なっている問題を取り除こうとしていますが、複数のマーカーを表示するには、少し横に移動する必要があります。
