与MarkerClustererPlus和OverlappingMarkerSpiderfier重叠的指针 [英] Overlapping Pointers with MarkerClustererPlus and OverlappingMarkerSpiderfier
本文介绍了与MarkerClustererPlus和OverlappingMarkerSpiderfier重叠的指针的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这张地图，并显示基于用户长和纬度的指针。现在我有OverlappingMarkerSpiderfier的问题。当有多于1个用户具有相同的长和经度时。例如：5人住在同一栋大楼内。我需要OverlappingMarkerSpiderfier来显示计数，然后点击进行sipderfy。默认情况下，OverlappingMarkerSpiderfier不会这么做。
函数初始化（）{
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）;
这里是jsfiddle
更新小提琴： http://jsfiddle.net/gL3L7zso/68
解决方案
其中一种方法是在群集中的每个标记上放置标签，并将最高标记的标记置于顶部。
oms.addMarker（标记）;
var markersNear = oms.markersNearMarker（marker，false）;
marker.setLabel（+（markersNear.length + 1））;
marker.setOptions（{
zIndex :marksNear.length
}）;
程式码片段：
< pre-class =snippet-code-js lang-js prettyprint-override>
var geoJson = {type：FeatureCollection，features：[{type：Feature，属性：{name：Bielefeld}，geometry：{type：Point，coordinates：[8.528849,52.030656]}}，{type：Feature ：{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 ：Herfor ，，，坐标 }，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纯黑; margin-top：8px;背景：黄色; 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 Overlappi ngMarkerSpiderfier（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（地图）; 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'，函数（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）; var markersNear = oms.markersNearMarker（marker，false）; marker。 setLabel（+（markersNe ar.length + 1））; marker.setOptions（{zIndex :marksNear.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\"></script><script src =https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus < / script> src =https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js>< / script>< div id =map>< / div>
I have this map and displaying pointers based on users long and lat. now i have a problem with OverlappingMarkerSpiderfier. when there are more than 1 users with same long and lat. for example: 5 people live in the same building. i need OverlappingMarkerSpiderfier to show the count and then on click to sipderfy it. by default, OverlappingMarkerSpiderfier doesnt work that way.
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);
here is the jsfiddle http://jsfiddle.net/gL3L7zso/62/
as you can see, when i click the battefield 3. its showing 1 pointer behind it hiding 3. i need it to be the same but, display the count of pointers hiding behind.
appreciate any solution for this.
update: to make the question more clear.
updated fiddle: http://jsfiddle.net/gL3L7zso/68
解决方案
One option would be to put a label on each marker in the "cluster", and put the highest labeled marker on top.
oms.addMarker(marker);
var markersNear = oms.markersNearMarker(marker, false);
marker.setLabel("" + (markersNear.length + 1));
marker.setOptions({
zIndex: markersNear.length
});
code snippet:
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);
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"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map"></div>
这篇关于与MarkerClustererPlus和OverlappingMarkerSpiderfier重叠的指针的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
