4

我正在创建一个带有标记和信息窗口的谷歌地图。我希望每个信息窗口都有一个缩放按钮，可以使 Google 地图放大和居中以及相应的标记。

有关示例，请参见此 jsfiddle。信息窗口的代码比较简单：

infoWindowArray[i] = new google.maps.InfoWindow({
    position: latlng,
    content: "<a href='/"+pitches[i].slug+".html'>"+pitches[i].name + " ("+ pitches[i].club+")</a><br /><img width='16' alt='Loupe' src='//upload.wikimedia.org/wikipedia/commons/thumb/4/48/Loupe.svg/32px-Loupe.svg.png'/> <a id='zoom_"+pitches[i].id+"' href='javascript:void(0)'>Zoom In</a>"
});

但是，我的脚本在 Chrome 中非常有气质，在 Firefox 中总是失败。原因是一次单击会以某种方式被触发两次。所以这个函数：

function setupZoomListeners(object, title, google_position, map){
    google.maps.event.addListener(object, 'domready', function() {
        google.maps.event.addDomListener(document.getElementById("zoom_"+title), 'click', function(){ 

            if (document.getElementById("zoom_"+title).innerHTML == "Zoom In"){
                map.setCenter(google_position);
                map.setZoom(14);
                document.getElementById("zoom_"+title).innerHTML = "Zoom out";
            } else {
                map.setCenter(new google.maps.LatLng(53.5, -2.2));
                map.setZoom(6);
                document.getElementById("zoom_"+title).innerHTML = "Zoom In";
            }


        });
}

正在放大和缩小，因为它听到了两次点击，所以净效果是什么。但是，只需删除 infowindow 中的 img 标签似乎就可以解决所有问题。

img 标签的存在是否会导致脚本将单击解释为两次？我见过很多点击次数过多的案例——这通常是什么原因造成的？

谁能建议如何解决这个问题？谢谢。

4

1 回答 1

1

它两次捕获您的domready事件（至少在我的 Firefox 19.0.2 版本中）。您可以看到，如果您像这样启动zoomListeners函数：

function setupZoomListeners(object, title, google_position, map){
    console.log('zoomListener');
    google.maps.event.addListener(object, 'domready', function() {
        console.log('domReady');
        google.maps.event.addDomListener(...

我不认为domready是一个在这里使用的好事件。就个人而言，我只会使用一个 infoWindow 对象并在单击标记时填充不同的 HTML。

在任何情况下，domready 都不打算像您所做的那样用于 dom 的子集。我相信每次您更改标记时它都会触发。因此，当开始的行document.getElementById("zoom_"+title).innerHTML = ...被执行时， domready事件将再次触发。

于 2013-03-26T08:00:25.487 回答