Google Maps Spiderfying Markers&添加听众 [英] Google Maps Spiderfying Markers & Adding Listeners
问题描述
- 将
oms.addListener()
在一个循环中。这样,一旦点击标记,就会在同一个标记上打开所有infoWindow
s。 - 将
oms.addListener()
就像OMS Git仓库中的示例一样。
https://github.com/jawj/OverlappingMarkerSpiderfier/blob /gh-pages/demo.html 。这样所有标记都具有相同的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);
});
我希望这个问题已经足够清楚了,
提前致谢。 oms.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));
};
额外功劳: geocodezip 和
所有infowindows具有相同的数据
一个工作示例可以在这里找到(我的应用程序): concert-dacote.com
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 allinfoWindow
s 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 sameinfoWindow
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&添加听众的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!