Google Maps API v3:是否有针对setMap()事件的回调或事件侦听器？

Google Maps API v3 中 setMap() 事件的回调处理

在 Google Maps API v3 中，setMap() 方法本身并没有直接提供回调函数或事件监听器，但可以通过其他方式实现类似的功能。

基础概念

setMap() 是 Google Maps JavaScript API 中用于将覆盖物（如标记、多边形等）添加到地图或从地图移除的方法：

marker.setMap(mapInstance) - 将标记添加到地图
marker.setMap(null) - 从地图移除标记

解决方案

1. 使用自定义事件

可以创建一个自定义事件系统来监听 setMap() 调用：

// 扩展Marker原型添加自定义事件
google.maps.Marker.prototype._setMap = google.maps.Marker.prototype.setMap;
google.maps.Marker.prototype.setMap = function(map) {
    this._setMap(map);
    var event = new CustomEvent('map_changed', { detail: { map: map } });
    this.dispatchEvent(event);
};

// 使用示例
var marker = new google.maps.Marker({ position: myLatLng });
marker.addEventListener('map_changed', function(e) {
    console.log('Marker map changed to:', e.detail.map ? 'added to map' : 'removed from map');
});

2. 覆盖原生方法

另一种方法是覆盖 setMap() 方法并添加回调：

// 保存原始方法
var originalSetMap = google.maps.Marker.prototype.setMap;

// 重写setMap方法
google.maps.Marker.prototype.setMap = function(map) {
    originalSetMap.call(this, map);
    
    // 触发回调
    if (typeof this.onMapChanged === 'function') {
        this.onMapChanged(map);
    }
};

// 使用示例
var marker = new google.maps.Marker({ position: myLatLng });
marker.onMapChanged = function(map) {
    console.log('Marker visibility changed:', map ? 'visible' : 'hidden');
};

3. 使用MutationObserver（现代浏览器）

对于DOM元素变化，可以使用MutationObserver：

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.attributeName === 'style') {
            var visibility = mutation.target.style.display === 'none' ? 'hidden' : 'visible';
            console.log('Marker visibility changed:', visibility);
        }
    });
});

var marker = new google.maps.Marker({ position: myLatLng });
observer.observe(marker.getPanes().overlayImage, { attributes: true });