Question

这里的第一篇文章，通常是一个读者而不是一张海报，但在这里！

使用Google Maps API对“点击”事件造成一些麻烦。

以下是该情景：
标记放在地图上，点击事件添加到标记，工作正常。另一个标记直接添加到现有标记顶部的地图上，没有单击事件。现在，原始标记的点击事件不再有效！但是，如果我将'click'事件更改为'mouseover'，它可以正常工作。

第一个标记代码：

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

Answer 1

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

我认为使用“new google.maps.MarkerImage”定义“可点击”标记的问题使其成为google maps canvas元素的一部分。

然后当标记使用“google.maps.SymbolPath.CIRCLE”进行定义并放在可点击标记的顶部时，它们是分开放置在地图Canvas元素顶部的Divs的单独元素。

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

我的解决方案是改变我创建可点击标记的方式。我使用了另一个Circle Symbol路径并给它一个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
          }         
    });

谷歌地图API - 点击事件不起作用，鼠标悬停吗？

1 个答案: