使用 MarkerClustererPlus 和 OverlappingMarkerSpiderfier 重叠指针
Overlapping Pointers with MarkerClustererPlus and OverlappingMarkerSpiderfier
我有这张地图并根据用户的经度和纬度显示指针。现在我对 OverlappingMarkerSpiderfier 有疑问。当有超过 1 个用户具有相同的经度和纬度时。例如:5 个人住在同一栋楼里。我需要 OverlappingMarkerSpiderfier 来显示计数,然后点击 sipderfy。默认情况下,OverlappingMarkerSpiderfier 不会那样工作。
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52, 8),
zoom: 4
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var oms = new OverlappingMarkerSpiderfier(map,{markersWontMove: true, markersWontHide: true, keepSpiderfied: true});
markerClusterer.setMap(map);
这里是jsfiddlehttp://jsfiddle.net/gL3L7zso/62/
如您所见,当我单击战场 3 时。它显示 1 个指针在它后面隐藏 3。我需要它是相同的但是,显示隐藏在后面的指针计数。
感谢对此的任何解决方案。
更新: 使问题更清楚。
已更新 fiddle:http://jsfiddle.net/gL3L7zso/68
一种选择是在“集群”中的每个标记上放置一个标签,并将标记最高的标记放在顶部。
oms.addMarker(marker);
var markersNear = oms.markersNearMarker(marker, false);
marker.setLabel("" + (markersNear.length + 1));
marker.setOptions({
zIndex: markersNear.length
});
代码片段:
var geoJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "Bielefeld"
},
"geometry": {
"type": "Point",
"coordinates": [8.528849, 52.030656]
}
}, {
"type": "Feature",
"properties": {
"name": "Bielefeld2"
},
"geometry": {
"type": "Point",
"coordinates": [8.528849, 52.030656]
}
}, {
"type": "Feature",
"properties": {
"name": "Bielefeld3"
},
"geometry": {
"type": "Point",
"coordinates": [8.528849, 52.030656]
}
}, {
"type": "Feature",
"properties": {
"name": "Herford"
},
"geometry": {
"type": "Point",
"coordinates": [8.676780, 52.118003]
}
}, {
"type": "Feature",
"properties": {
"name": "Guetersloh"
},
"geometry": {
"type": "Point",
"coordinates": [8.383353, 51.902917]
}
}, {
"type": "Feature",
"properties": {
"name": "Guetersloh2"
},
"geometry": {
"type": "Point",
"coordinates": [8.38, 51.9]
}
}]
};
var map = null;
var bounds = new google.maps.LatLngBounds();
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
var infobox = new InfoBox({
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
});
var markerClusterer = new MarkerClusterer(map, [], {imagePath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"});
minClusterZoom = 14;
markerClusterer.setMaxZoom(minClusterZoom);
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52.030656,8.528849),
zoom: 14
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListenerOnce(map, 'idle', function() {
var oms = new OverlappingMarkerSpiderfier(map, {
markersWontMove: true,
markersWontHide: true,
keepSpiderfied: true
});
oms.addListener('unspiderfy', function(spidered, unspidered) {
for (var i = 0; i < spidered.length; i++) {
spidered[i].setLabel("" + (i + 1));
spidered[i].setOptions({
zIndex: i
});
}
});
markerClusterer.setMap(map);
google.maps.event.addListener(map.data, 'addfeature', function(e) {
if (e.feature.getGeometry().getType() === 'Point') {
var marker = new google.maps.Marker({
position: e.feature.getGeometry().get(),
title: e.feature.getProperty('name'),
map: map
});
google.maps.event.addListener(marker, 'click', function(marker, e) {
return function() {
var myHTML = e.feature.getProperty('name');
boxText.innerHTML = "<div style='text-align: center;'><b>" + myHTML + "</b></div>";
infobox.setPosition(e.feature.getGeometry().get());
infobox.setOptions({
pixelOffset: new google.maps.Size(0, 0)
});
infobox.open(map);
};
}(marker, e));
markerClusterer.addMarker(marker);
oms.addMarker(marker);
google.maps.event.addListener(map, 'idle', function() {
var markersNear = oms.markersNearMarker(marker, false);
marker.setLabel("" + (markersNear.length + 1));
marker.setOptions({
zIndex: markersNear.length
});
});
}
});
layer = map.data.addGeoJson(geoJson);
map.data.setMap(null);
google.maps.event.addListener(map, "click", function() {
infobox.close();
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
width: 100%;
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
<script src="https://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/google-maps-utility-library-v3-infobox@1.1.14/dist/infobox.min.js"></script>
<div id="map"></div>
我有这张地图并根据用户的经度和纬度显示指针。现在我对 OverlappingMarkerSpiderfier 有疑问。当有超过 1 个用户具有相同的经度和纬度时。例如:5 个人住在同一栋楼里。我需要 OverlappingMarkerSpiderfier 来显示计数,然后点击 sipderfy。默认情况下,OverlappingMarkerSpiderfier 不会那样工作。
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52, 8),
zoom: 4
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var oms = new OverlappingMarkerSpiderfier(map,{markersWontMove: true, markersWontHide: true, keepSpiderfied: true});
markerClusterer.setMap(map);
这里是jsfiddlehttp://jsfiddle.net/gL3L7zso/62/
如您所见,当我单击战场 3 时。它显示 1 个指针在它后面隐藏 3。我需要它是相同的但是,显示隐藏在后面的指针计数。
感谢对此的任何解决方案。
更新: 使问题更清楚。
已更新 fiddle:http://jsfiddle.net/gL3L7zso/68
一种选择是在“集群”中的每个标记上放置一个标签,并将标记最高的标记放在顶部。
oms.addMarker(marker);
var markersNear = oms.markersNearMarker(marker, false);
marker.setLabel("" + (markersNear.length + 1));
marker.setOptions({
zIndex: markersNear.length
});
代码片段:
var geoJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "Bielefeld"
},
"geometry": {
"type": "Point",
"coordinates": [8.528849, 52.030656]
}
}, {
"type": "Feature",
"properties": {
"name": "Bielefeld2"
},
"geometry": {
"type": "Point",
"coordinates": [8.528849, 52.030656]
}
}, {
"type": "Feature",
"properties": {
"name": "Bielefeld3"
},
"geometry": {
"type": "Point",
"coordinates": [8.528849, 52.030656]
}
}, {
"type": "Feature",
"properties": {
"name": "Herford"
},
"geometry": {
"type": "Point",
"coordinates": [8.676780, 52.118003]
}
}, {
"type": "Feature",
"properties": {
"name": "Guetersloh"
},
"geometry": {
"type": "Point",
"coordinates": [8.383353, 51.902917]
}
}, {
"type": "Feature",
"properties": {
"name": "Guetersloh2"
},
"geometry": {
"type": "Point",
"coordinates": [8.38, 51.9]
}
}]
};
var map = null;
var bounds = new google.maps.LatLngBounds();
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
var infobox = new InfoBox({
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
});
var markerClusterer = new MarkerClusterer(map, [], {imagePath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"});
minClusterZoom = 14;
markerClusterer.setMaxZoom(minClusterZoom);
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52.030656,8.528849),
zoom: 14
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListenerOnce(map, 'idle', function() {
var oms = new OverlappingMarkerSpiderfier(map, {
markersWontMove: true,
markersWontHide: true,
keepSpiderfied: true
});
oms.addListener('unspiderfy', function(spidered, unspidered) {
for (var i = 0; i < spidered.length; i++) {
spidered[i].setLabel("" + (i + 1));
spidered[i].setOptions({
zIndex: i
});
}
});
markerClusterer.setMap(map);
google.maps.event.addListener(map.data, 'addfeature', function(e) {
if (e.feature.getGeometry().getType() === 'Point') {
var marker = new google.maps.Marker({
position: e.feature.getGeometry().get(),
title: e.feature.getProperty('name'),
map: map
});
google.maps.event.addListener(marker, 'click', function(marker, e) {
return function() {
var myHTML = e.feature.getProperty('name');
boxText.innerHTML = "<div style='text-align: center;'><b>" + myHTML + "</b></div>";
infobox.setPosition(e.feature.getGeometry().get());
infobox.setOptions({
pixelOffset: new google.maps.Size(0, 0)
});
infobox.open(map);
};
}(marker, e));
markerClusterer.addMarker(marker);
oms.addMarker(marker);
google.maps.event.addListener(map, 'idle', function() {
var markersNear = oms.markersNearMarker(marker, false);
marker.setLabel("" + (markersNear.length + 1));
marker.setOptions({
zIndex: markersNear.length
});
});
}
});
layer = map.data.addGeoJson(geoJson);
map.data.setMap(null);
google.maps.event.addListener(map, "click", function() {
infobox.close();
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
width: 100%;
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
<script src="https://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/google-maps-utility-library-v3-infobox@1.1.14/dist/infobox.min.js"></script>
<div id="map"></div>