Google 地图 API OverlappingMarkerSpiderfier - 重叠标记未微调
Google Maps API OverlappingMarkerSpiderfier - overlapping markers are NOT NUDGED
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,
nudgeRadius: 20,
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>
我在网页上为 Javascript 使用 Google 地图 API。使用 Lat/Lng 从一个数组创建多个标记，并使用我在其他地方找到的示例中的 overlapping-marker-spiderfier 和 markerclusterer 用于它们的预期用途。
我的问题是当 de-spiderfied/de-clustered 时标记仍然相互重叠。单击重叠的标记可以正确地蜘蛛化它们并显示每个标记。这让最终用户感到困惑，因为他们不知道某些标记是 hidden/overlapped 并且不会点击。
我尝试在 spiderfier 中使用 Nudge 选项，但它们似乎没有效果。 Nudge 选项在此处定义：https://openbase.com/js/overlapping-marker-spiderfier/documentation
我想知道我是否引用了最新的 Spider 代码。
关于如何防止这些重叠标记有什么想法吗？明确地说，我正在尝试解决下面第二个屏幕截图中显示的问题，其中标记重叠，但应该稍微向一侧轻推以显示多个标记。
使用最新版本的 Overlapping Marker Spiderfier (1.1.4) documentation you reference
附带的版本
要获取 cdn link 使用 GitHub 项目的组合：OverlappingMarkerSpiderfier by fritz-c and the version
<script src="https://cdn.jsdelivr.net/gh/fritz-c/OverlappingMarkerSpiderfier@1.1.4/dist/oms.min.js"></script>
工作代码片段：
var map;
var Sightings = [{
lat: 20.735280,
lng: -105.401653,
title: "Tournefortia hartwegiana",
code: 'TOHA',
sightingid: '40888'
},
{
lat: 20.740620,
lng: -105.394615,
title: "Rufous-bellied Chachalaca",
code: 'RBCH',
sightingid: '40862'
},
{
lat: 20.739182,
lng: -105.395732,
title: "Inca Dove",
code: 'INDO',
sightingid: '40863'
},
{
lat: 20.738601,
lng: -105.399059,
title: "Squirrel Cuckoo",
code: 'SQCU',
sightingid: '40864'
},
{
lat: 20.738876,
lng: -105.397491,
title: "Broad-billed Hummingbird",
code: 'BBHU',
sightingid: '40865'
},
{
lat: 20.736121,
lng: -105.403218,
title: "Whimbrel",
code: 'WHIM',
sightingid: '40866'
},
{
lat: 20.736850,
lng: -105.405225,
title: "Spotted Sandpiper",
code: 'SPSA',
sightingid: '40867'
},
{
lat: 20.736135,
lng: -105.403247,
title: "Willet",
code: 'WILL',
sightingid: '40868'
},
{
lat: 20.735280,
lng: -105.401653,
title: "Heermann's Gull",
code: 'HEGU',
sightingid: '40869'
},
{
lat: 20.739167,
lng: -105.395756,
title: "Magnificent Frigatebird",
code: 'MAFR',
sightingid: '40870'
},
{
lat: 20.735632,
lng: -105.401692,
title: "Blue-footed Booby",
code: 'BFBO',
sightingid: '40871'
},
{
lat: 20.738925,
lng: -105.397099,
title: "Brown Pelican",
code: 'BRPE',
sightingid: '40872'
},
{
lat: 20.736121,
lng: -105.403218,
title: "Snowy Egret",
code: 'SNEG',
sightingid: '40873'
},
{
lat: 20.737766,
lng: -105.401894,
title: "Black Vulture",
code: 'BLVU',
sightingid: '40874'
},
{
lat: 20.740601,
lng: -105.394636,
title: "Turkey Vulture",
code: 'TUVU',
sightingid: '40875'
},
{
lat: 20.738880,
lng: -105.397410,
title: "Gray Hawk",
code: 'GRHA',
sightingid: '40876'
},
{
lat: 20.735397,
lng: -105.401703,
title: "Belted Kingfisher",
code: 'BEKI',
sightingid: '40877'
},
{
lat: 20.740608,
lng: -105.394595,
title: "Orange-fronted Parakeet",
code: 'OFPA',
sightingid: '40878'
},
{
lat: 20.740620,
lng: -105.394615,
title: "Greenish Elaenia",
code: 'GREL',
sightingid: '40879'
},
{
lat: 20.740033,
lng: -105.394573,
title: "Social Flycatcher",
code: 'SOFL',
sightingid: '40880'
},
{
lat: 20.737745,
lng: -105.403846,
title: "Tropical Kingbird",
code: 'TRKI',
sightingid: '40881'
},
{
lat: 20.738877,
lng: -105.397251,
title: "Plumbeous Vireo",
code: 'PLVI',
sightingid: '40882'
},
{
lat: 20.738584,
lng: -105.399194,
title: "San Blas Jay",
code: 'SBJA',
sightingid: '40883'
},
{
lat: 20.739244,
lng: -105.396119,
title: "Blue-gray Gnatcatcher",
code: 'BGGN',
sightingid: '40884'
},
{
lat: 20.738886,
lng: -105.397373,
title: "Happy Wren",
code: 'HAWR',
sightingid: '40885'
},
{
lat: 20.738584,
lng: -105.399194,
title: "Sinaloa Wren",
code: 'SIWR',
sightingid: '40886'
},
{
lat: 20.739209,
lng: -105.396036,
title: "Streak-backed Oriole",
code: 'SBOR',
sightingid: '40887'
}
];
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
});
google.maps.event.addListener(map, 'click', function(evt) {
console.log(evt.latLng.toUrlValue(6)+" zoom="+map.getZoom());
})
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,
keepSpiderfied: true,
});
var markers = new Array();
for (var i = 0; i < Sightings.length; i++) {
(function() {
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) {
console.log(this.getPosition().toUrlValue(6)+" title:"+this.getTitle()+" spider_click")
});
marker.addListener('click', function(e) {
console.log(this.getPosition().toUrlValue(6)+" title:"+this.getTitle()+" click")
});
marker.addListener('format', function(e) {
console.log(this.getPosition().toUrlValue(6)+" title:"+this.getTitle()+" format")
});
marker.addListener('unspiderfy', function(e) {
console.log(this.getPosition().toUrlValue(6)+" title:"+this.getTitle()+" unspiderfy")
});
marker.addListener('spiderfy', function(e) {
console.log(this.getPosition().toUrlValue(6)+" title:"+this.getTitle()+" spiderfy")
});
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);
map.setCenter({lat:20.736114,lng:-105.403252});
map.setZoom(19);
google.maps.event.addListener(markerCluster, 'click', function(evt) {
console.log("markerClusterer click:"+evt.markers_.length);
for (var i=0; i<evt.markers_.length; i++) {
console.log(evt.markers_[i].getPosition().toUrlValue(6)+" label="+evt.markers_[i].getLabel());
google.maps.event.trigger(evt.markers_[i],"click");
}
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
#GoogleMap {
height: 70%;
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<h1>Hello World</h1>
<div id='GoogleMap'></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&v=weekly&channel=2"></script>
<script src="https://cdn.jsdelivr.net/gh/fritz-c/OverlappingMarkerSpiderfier@1.1.4/dist/oms.min.js"></script>
<script src='https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js'></script>
</body>
</html>
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,
nudgeRadius: 20,
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>
我在网页上为 Javascript 使用 Google 地图 API。使用 Lat/Lng 从一个数组创建多个标记，并使用我在其他地方找到的示例中的 overlapping-marker-spiderfier 和 markerclusterer 用于它们的预期用途。
我的问题是当 de-spiderfied/de-clustered 时标记仍然相互重叠。单击重叠的标记可以正确地蜘蛛化它们并显示每个标记。这让最终用户感到困惑，因为他们不知道某些标记是 hidden/overlapped 并且不会点击。
我尝试在 spiderfier 中使用 Nudge 选项，但它们似乎没有效果。 Nudge 选项在此处定义：https://openbase.com/js/overlapping-marker-spiderfier/documentation
我想知道我是否引用了最新的 Spider 代码。
关于如何防止这些重叠标记有什么想法吗？明确地说，我正在尝试解决下面第二个屏幕截图中显示的问题，其中标记重叠，但应该稍微向一侧轻推以显示多个标记。
使用最新版本的 Overlapping Marker Spiderfier (1.1.4) documentation you reference
附带的版本要获取 cdn link 使用 GitHub 项目的组合：OverlappingMarkerSpiderfier by fritz-c and the version
<script src="https://cdn.jsdelivr.net/gh/fritz-c/OverlappingMarkerSpiderfier@1.1.4/dist/oms.min.js"></script>
工作代码片段：
var map;
var Sightings = [{
lat: 20.735280,
lng: -105.401653,
title: "Tournefortia hartwegiana",
code: 'TOHA',
sightingid: '40888'
},
{
lat: 20.740620,
lng: -105.394615,
title: "Rufous-bellied Chachalaca",
code: 'RBCH',
sightingid: '40862'
},
{
lat: 20.739182,
lng: -105.395732,
title: "Inca Dove",
code: 'INDO',
sightingid: '40863'
},
{
lat: 20.738601,
lng: -105.399059,
title: "Squirrel Cuckoo",
code: 'SQCU',
sightingid: '40864'
},
{
lat: 20.738876,
lng: -105.397491,
title: "Broad-billed Hummingbird",
code: 'BBHU',
sightingid: '40865'
},
{
lat: 20.736121,
lng: -105.403218,
title: "Whimbrel",
code: 'WHIM',
sightingid: '40866'
},
{
lat: 20.736850,
lng: -105.405225,
title: "Spotted Sandpiper",
code: 'SPSA',
sightingid: '40867'
},
{
lat: 20.736135,
lng: -105.403247,
title: "Willet",
code: 'WILL',
sightingid: '40868'
},
{
lat: 20.735280,
lng: -105.401653,
title: "Heermann's Gull",
code: 'HEGU',
sightingid: '40869'
},
{
lat: 20.739167,
lng: -105.395756,
title: "Magnificent Frigatebird",
code: 'MAFR',
sightingid: '40870'
},
{
lat: 20.735632,
lng: -105.401692,
title: "Blue-footed Booby",
code: 'BFBO',
sightingid: '40871'
},
{
lat: 20.738925,
lng: -105.397099,
title: "Brown Pelican",
code: 'BRPE',
sightingid: '40872'
},
{
lat: 20.736121,
lng: -105.403218,
title: "Snowy Egret",
code: 'SNEG',
sightingid: '40873'
},
{
lat: 20.737766,
lng: -105.401894,
title: "Black Vulture",
code: 'BLVU',
sightingid: '40874'
},
{
lat: 20.740601,
lng: -105.394636,
title: "Turkey Vulture",
code: 'TUVU',
sightingid: '40875'
},
{
lat: 20.738880,
lng: -105.397410,
title: "Gray Hawk",
code: 'GRHA',
sightingid: '40876'
},
{
lat: 20.735397,
lng: -105.401703,
title: "Belted Kingfisher",
code: 'BEKI',
sightingid: '40877'
},
{
lat: 20.740608,
lng: -105.394595,
title: "Orange-fronted Parakeet",
code: 'OFPA',
sightingid: '40878'
},
{
lat: 20.740620,
lng: -105.394615,
title: "Greenish Elaenia",
code: 'GREL',
sightingid: '40879'
},
{
lat: 20.740033,
lng: -105.394573,
title: "Social Flycatcher",
code: 'SOFL',
sightingid: '40880'
},
{
lat: 20.737745,
lng: -105.403846,
title: "Tropical Kingbird",
code: 'TRKI',
sightingid: '40881'
},
{
lat: 20.738877,
lng: -105.397251,
title: "Plumbeous Vireo",
code: 'PLVI',
sightingid: '40882'
},
{
lat: 20.738584,
lng: -105.399194,
title: "San Blas Jay",
code: 'SBJA',
sightingid: '40883'
},
{
lat: 20.739244,
lng: -105.396119,
title: "Blue-gray Gnatcatcher",
code: 'BGGN',
sightingid: '40884'
},
{
lat: 20.738886,
lng: -105.397373,
title: "Happy Wren",
code: 'HAWR',
sightingid: '40885'
},
{
lat: 20.738584,
lng: -105.399194,
title: "Sinaloa Wren",
code: 'SIWR',
sightingid: '40886'
},
{
lat: 20.739209,
lng: -105.396036,
title: "Streak-backed Oriole",
code: 'SBOR',
sightingid: '40887'
}
];
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
});
google.maps.event.addListener(map, 'click', function(evt) {
console.log(evt.latLng.toUrlValue(6)+" zoom="+map.getZoom());
})
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,
keepSpiderfied: true,
});
var markers = new Array();
for (var i = 0; i < Sightings.length; i++) {
(function() {
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) {
console.log(this.getPosition().toUrlValue(6)+" title:"+this.getTitle()+" spider_click")
});
marker.addListener('click', function(e) {
console.log(this.getPosition().toUrlValue(6)+" title:"+this.getTitle()+" click")
});
marker.addListener('format', function(e) {
console.log(this.getPosition().toUrlValue(6)+" title:"+this.getTitle()+" format")
});
marker.addListener('unspiderfy', function(e) {
console.log(this.getPosition().toUrlValue(6)+" title:"+this.getTitle()+" unspiderfy")
});
marker.addListener('spiderfy', function(e) {
console.log(this.getPosition().toUrlValue(6)+" title:"+this.getTitle()+" spiderfy")
});
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);
map.setCenter({lat:20.736114,lng:-105.403252});
map.setZoom(19);
google.maps.event.addListener(markerCluster, 'click', function(evt) {
console.log("markerClusterer click:"+evt.markers_.length);
for (var i=0; i<evt.markers_.length; i++) {
console.log(evt.markers_[i].getPosition().toUrlValue(6)+" label="+evt.markers_[i].getLabel());
google.maps.event.trigger(evt.markers_[i],"click");
}
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
#GoogleMap {
height: 70%;
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<h1>Hello World</h1>
<div id='GoogleMap'></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&v=weekly&channel=2"></script>
<script src="https://cdn.jsdelivr.net/gh/fritz-c/OverlappingMarkerSpiderfier@1.1.4/dist/oms.min.js"></script>
<script src='https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js'></script>
</body>
</html>