Google Maps API v3中的标记(Marker)是地图上用于标识位置的图标。开发者可以自定义标记的外观和行为,包括添加点击事件监听器。
在Firefox浏览器中,自定义标记的点击事件有时无法正常触发,而在其他浏览器(如Chrome)中工作正常。
确保自定义标记的z-index高于其他可能遮挡的元素:
marker.setZIndex(999);
google.maps.event.addListener(marker, 'click', function() {
console.log('Marker clicked');
});
添加明确的点击区域定义:
var marker = new google.maps.Marker({
position: location,
map: map,
icon: {
url: 'path/to/icon.svg',
scaledSize: new google.maps.Size(40, 40),
anchor: new google.maps.Point(20, 20)
}
});
如果自定义标记使用HTML元素实现:
.custom-marker {
pointer-events: auto;
}
function CustomMarker(latlng, map) {
this.latlng_ = latlng;
this.element_ = document.createElement('div');
this.element_.className = 'custom-marker';
this.element_.style.position = 'absolute';
this.element_.style.cursor = 'pointer';
this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.onAdd = function() {
this.getPanes().overlayMouseTarget.appendChild(this.element_);
google.maps.event.addDomListener(this.element_, 'click', function() {
google.maps.event.trigger(this, 'click');
}.bind(this));
};
// 使用
var marker = new CustomMarker(latlng, map);
google.maps.event.addListener(marker, 'click', function() {
console.log('Custom marker clicked');
});
这个问题主要出现在:
通过以上方法,应该能够解决Firefox中自定义标记点击事件不触发的问题。
没有搜到相关的文章