Question

我正在创建一个带有标记和infowindows的Google地图。我希望每个infowindow都有一个缩放按钮，使Google地图放大并居中和相应的标记。

有关示例，请参阅此jsfiddle。 infowindow的代码相对简单：

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标签的存在会导致脚本将一次点击解释为两次？我已经看到很多情况下注册的点击次数太多 - 这通常会导致什么？

任何人都可以建议如何解决这个问题？感谢。

Answer 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 事件将再次触发。

图像导致点击事件两次开火？

1 个答案: