Google Maps API - 点击事件不起作用，鼠标悬停？答案

【问题标题】：Google Maps API - Click event doesn't work, Mouseover does?Google Maps API - 点击事件不起作用，鼠标悬停？
【发布时间】：2014-01-07 15:58:07
【问题描述】：

这里的第一个帖子，通常是读者而不是海报，但这里就可以了！

使用 Google Maps API 处理“点击”事件时遇到了一些麻烦。

这是场景：
标记放置在地图上，单击事件添加到标记，工作正常。另一个标记直接添加到现有标记的顶部，没有点击事件。原始标记的点击事件现在不再起作用！但是，如果我将“点击”事件更改为“鼠标悬停”，它就可以正常工作。

第一个标记的代码：

var marker1 = new google.maps.Marker({
        position: marker1[0],
        map: map,
        draggable: false,
        icon: new google.maps.MarkerImage('img/' + type + '.png',           
        new google.maps.Size(16, 16),
        new google.maps.Point(0,0),
        new google.maps.Point(8, 8)
        )
    });

覆盖在现有标记上的标记代码：

var marker2 = new google.maps.Marker({
          position: position,
          map: map,
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            fillOpacity: 0,
            strokeOpacity: 1.0,
            strokeColor: '#72008F',
            strokeWeight: 3.0, 
            scale: 10
          }
        });

监听器代码：

google.maps.event.addListener(marker, 'click', function(event) {
    $("#IDhere").html("Some HTML here");
});

【问题讨论】：

您为什么希望能够点击隐藏的标记？如果您将点击侦听器添加到新标记，我希望它会起作用。
它可能会起作用，但是有许多不同的标记可以覆盖在顶部，这意味着成千上万的事件处理程序。我感兴趣的是，为什么鼠标悬停事件可以正常工作，而单击却不行？另外，我尝试添加我希望最后可点击的标记，希望它会位于其他标记之上，但没有奏效。
鼠标悬停情况下的代码是什么样的？（也许是一个 jsfiddle？）您将可点击标记放在顶部的代码是什么样的？你设置了标记的 zIndex 吗？
从字面上将“单击”一词更改为“鼠标悬停”，它可以正常工作！（这就是为什么我在这里有点困惑）我会重新做第二部分并回复你

标签： javascript jquery api google-maps

【解决方案1】：

我通过变通方法解决了我的问题。

我看到的问题是使用“新 google.maps.MarkerImage”定义“可点击”标记使其成为谷歌地图画布元素的一部分。

然后，当使用“google.maps.SymbolPath.CIRCLE”定义的标记出现并被放置在可点击标记的顶部时，它们是单独的元素，被限制在地图画布元素顶部的 Divs 中。

因此，正如@geocodezip 正确指出的那样，可点击标记（谷歌地图画布的一部分）被其 Div 中的另一个标记隐藏。

我的解决方案是改变我创建可点击标记的方式。我使用了另一个圆形符号路径，并给它一个 99999 的 zIndex，所以总是在顶部。

Marker1 现在看起来像这样

var marker = new google.maps.Marker({
        position: marker1[0],
        map: map,
        draggable: false,
        zIndex: 99999,
        icon: {
            path: google.maps.SymbolPath.CIRCLE,
            fillOpacity: 1,
            fillColor: type,
            strokeOpacity: 1,
            strokeColor: '#000',
            strokeWeight: 1 ,
            scale: 5
          }         
    });

【讨论】：