本文介绍了Google Maps Spiderfying Markers&添加听众的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图蜘蛛我的标记和添加听众。 Spidefying的工作正常，这意味着我得到的重叠标记spiderfied但问题是，我似乎无法计算如何添加监听器到这些标记。换句话说，我已经尝试了以下内容：- 将 oms.addListener（）在一个循环中。这样，一旦点击标记，就会在同一个标记上打开所有 infoWindow s。
- 将 oms.addListener（）就像OMS Git仓库中的示例一样。
。这样所有标记都具有相同的 infoWindow ，这是循环中的最后一个。
这是我的代码：
var iw = new google.maps.InfoWindow（）;
var oms = new OverlappingMarkerSpiderfier（carte，{keepSpiderfied：true}）;
oms.addListener（'click'，function（marker）{
iw.setContent（content）;
iw.open（carte，marker）;
}）;
var markers = [];
var bounds = new google.maps.LatLngBounds（）;
if（response.length！= 0）{
for（var i = 0; i< response.length; i ++）{
var loc = new google.maps.LatLng（response [i] .latlong [0]，response [i] .latlong [1]）;
bounds.extend（loc）;
var lemarqueur = new google.maps.Marker（{
position：loc，
title：response [i] .title
}）;
content ='< table>< tr>< td>< img src =''
+ response [i] .image +'/>< / td>< td> ;< p style =font-size：13px>'
+ response [i] .title +'< / p> < p style =font-size：10px>< b>艺术家：< / b> '
+ response [i] .artist +'< br>< b>日期：< / b> '+ response [i] .startDate +'< br>'
+ response [i] .address.name +''+ response [i] .address.street +'< br>'
+ response [i] .address.postalcode +'，'+ response [i] .address.city +'，'
+ response [i] .address.country
+'< br><< ; a target =_ blankhref ='
+ response [i] .url +'>更多信息< / a>< / p>< / td>< / tr>< / table> ;
oms.addMarker（lemarqueur）;
markers.push（lemarqueur）;
};
carte.fitBounds（bounds）;
var markerCluster = new MarkerClusterer（carte，markers）;
markerCluster.setMaxZoom（15）;
markerCluster.setGridSize（40）;
google.maps.event.addDomListener（窗口，'load'，initialiser）;
所以我想知道应该在哪里放置 addListener（） block？
这是我之前在循环中使用的，使用 google.maps.event.addListener（），它工作得很好：
google.maps.event.addListener（lemarqueur，'click'，function （）{
InfoWindow.open（carte，lemarqueur）;
}）;
我希望这个问题已经足够清楚了，
提前致谢。的作用方式与 google.maps.event.addListener（）。
所以我通过使用原来的 google.maps.event.addListener（）而不是 oms.addListener（） 在中用于循环。像这样：
var infoWindows = [];
函数closeInfoWindows（）{
var i = infoWindows.length;
while（i - ）{
infoWindows [i] .close（）;
函数newMarker（map，response，oms）{
var loc = new google.maps.LatLng（response.latlong [0]，response .latlong [1]）;
var marker = new google.maps.Marker（{
position：loc，
title：response.title
}）;
oms.addMarker（marker）;
var WindowOptions = {content：'some desc ...'};
var InfoWindow = new google.maps.InfoWindow（WindowOptions）;
infoWindows.push（InfoWindow）;
google.maps.event.addListener（marker，'click'，function（）{
closeInfoWindows（）;
InfoWindow.open（carte，marker）; //或者这个代替标记
}）;
返回标记;
$ b for（var i = 0; i< response.length; i ++）{
markers.push（newMarker（map，response [i] ，oms））;
};
额外功劳： 和
一个工作示例可以在这里找到（我的应用程序）：
I'm trying to Spiderfy my markers and adding listeners to them. The Spidefying works fine that means I get the overlapping markers spiderfied but the problem is that I can't seem to figure how to add listeners to these markers. In other words I have tried the following:
- Putting the oms.addListener() in a loop. This way, upon clicking on a marker would open all infoWindows on the same marker which isn't delightful.
- Putting the oms.addListener() outside the loop like the example on the OMS Git repo.https://github.com/jawj/OverlappingMarkerSpiderfier/blob/gh-pages/demo.html. This way all the markers have the same infoWindow which is the last one from the loop.
This is my code:
var iw = new google.maps.InfoWindow();
var oms = new OverlappingMarkerSpiderfier(carte, {keepSpiderfied:true});
oms.addListener('click', function(marker){
iw.setContent(content);
iw.open(carte, marker);
});
var markers =[];
var bounds = new google.maps.LatLngBounds();
if (response.length != 0) {
for (var i = 0 ; i < response.length; i++) {
var loc = new google.maps.LatLng(response[i].latlong[0], response[i].latlong[1]);
bounds.extend(loc);
var lemarqueur = new google.maps.Marker({
position: loc,
title: response[i].title
});
content = '<table><tr><td><img src="'
+response[i].image+'"/></td><td><p style="font-size: 13px">'
+response[i].title+'</p> <p style="font-size: 10px"><b>Artists:</b> '
+response[i].artist+'<br><b>Date:</b> '+response[i].startDate+'<br>'
+response[i].address.name +' '+response[i].address.street + '<br>'
+response[i].address.postalcode +', '+response[i].address.city +', '
+response[i].address.country
+'<br><a target="_blank" href ='
+response[i].url+'>More info</a></p></td></tr></table>';
oms.addMarker(lemarqueur);
markers.push(lemarqueur);
};
carte.fitBounds(bounds);
var markerCluster = new MarkerClusterer(carte, markers);
markerCluster.setMaxZoom(15);
markerCluster.setGridSize(40);
google.maps.event.addDomListener(window, 'load', initialiser);
So I would like to know where should I put the addListener() block?
This what I have used before in the loop, using google.maps.event.addListener(), which worked fine:
google.maps.event.addListener(lemarqueur, 'click', function() {
InfoWindow.open(carte, lemarqueur);
});
I hope the question is clear enough,
Thanks in advance.
解决方案
The oms.addListener() does not act the same way as google.maps.event.addListener().So I somehow made it to work by using the original google.maps.event.addListener() instead of oms.addListener() inside a for loop. Like so:
var infoWindows = [];
function closeInfoWindows(){
var i = infoWindows.length;
while(i--){
infoWindows[i].close();
}
}
function newMarker(map, response, oms){
var loc = new google.maps.LatLng(response.latlong[0], response.latlong[1]);
var marker = new google.maps.Marker({
position: loc,
title: response.title
});
oms.addMarker(marker);
var WindowOptions = { content:'some desc...'};
var InfoWindow = new google.maps.InfoWindow(WindowOptions);
infoWindows.push(InfoWindow);
google.maps.event.addListener(marker, 'click', function() {
closeInfoWindows();
InfoWindow.open(carte, marker); // or this instead of marker
});
return marker;
}
for (var i = 0 ; i < response.length; i++) {
markers.push(newMarker(map, response[i], oms));
};
Extra credit to: geocodezip and All infowindows have same data
A working example could be found here (my app): concert-dacote.com
这篇关于Google Maps Spiderfying Markers&添加听众的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！