谷歌地图蜘蛛标记和添加听众答案

【问题标题】：Google Maps Spiderfying Markers & Adding Listeners谷歌地图蜘蛛标记和添加听众
【发布时间】：2013-06-16 08:53:20
【问题描述】：

我正在尝试蜘蛛化我的标记并向它们添加侦听器。 Spidefying 工作正常，这意味着我得到了重叠的标记，但问题是我似乎无法弄清楚如何将侦听器添加到这些标记。换句话说，我尝试了以下方法：

将oms.addListener() 放入循环中。这样一来，在单击标记时，会在同一个标记上打开所有 infoWindows，这并不令人愉快。
将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>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);

所以我想知道我应该把addListener() 块放在哪里？

这是我之前在循环中使用的，使用google.maps.event.addListener()，效果很好：

google.maps.event.addListener(lemarqueur, 'click', function() {
    InfoWindow.open(carte, lemarqueur);
});

我希望问题足够清楚，
提前致谢。

【问题讨论】：

这不是 Spiderifier 的问题，而是可以通过函数闭包（创建标记函数）轻松解决的问题。 stackoverflow.com/questions/4897316/… - stackoverflow.com/questions/3711700/…
@geocodezip - 实际上我的代码具有函数闭包，这意味着它类似于：function createMarker(); for(){marker = createMarker;}。但是为了简单起见，我在这里粘贴了这样的内容，因为这里还有其他事情不在主题范围内。
@geocodezip - 如果你能提供一个 Spiderfying 示例，其中有一个函数闭包和循环一些 JSON 数据。那将非常感激。
这是一个example（但没有函数闭包）。

标签： javascript google-maps-api-3 listener google-maps-markers infowindow

【解决方案1】：

oms.addListener() 的行为方式与google.maps.event.addListener() 不同。所以我以某种方式通过在for 循环中使用原始google.maps.event.addListener() 而不是oms.addListener() 使其工作。像这样：

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));
    };

额外感谢： geocodezip 和 All infowindows have same data

可以在这里找到一个工作示例（我的应用程序）：concert-dacote.com

【讨论】：

OMS 处理程序在每次点击时都会触发每个标记的点击事件……不知道我做错了什么，但使用 4k+ 标记它不会飞。我什至没有想过尝试恢复到香草点击处理程序，因为 OMS 文档说您必须使用他们的，但是……whaddaya 知道吗？感谢您的提示！
@AdrianGünter 很高兴能提供帮助。我遇到了完全相同的问题。

【解决方案2】：

下面是另一种将侦听器添加到 spiderfiered 标记的方法，其中 NO FOR LOOP NEEDED：

var oms = new OverlappingMarkerSpiderfier (...) ;

// Create this function
function addClickListenerToMarker(marker, onClickListener) {
    oms.addListener('click', function (markerArg, eventArg) {
        if (marker == markerArg)
            onClickListener(marker, eventArg);
    });
}

// Add a click listener to your marker
var myMarker = ...
addClickListenerToMarker(myMarker, function (marker, event) {
    alert('I have been clicked');
});

【讨论】：