Google Maps API 3.32/3.33版本MapOverlay加载失败报错求助

我之前也碰到过一模一样的问题，Google Maps从3.31升级到3.32/3.33后，自定义Overlay突然报Cannot read property 'parentNode' of null错误，排查下来确实是onAdd还没执行就触发了onRemove，导致this.div还是null。这是因为API在3.32版本对OverlayView的生命周期做了细节调整，你的代码需要做几个小修改来适配：

1. 重构MapOverlay构造函数，移除内部的setMap调用 #

原来的构造函数里直接调用this.setMap(map)会让Overlay的生命周期提前触发，和外部的setMap调用冲突。把这部分逻辑移到外部统一控制：

function MapOverlay(bounds, image) { 
    var sw = new google.maps.LatLng(bounds.southWest.latitude, bounds.southWest.longitude);
    var ne = new google.maps.LatLng(bounds.northEast.latitude, bounds.northEast.longitude);
    this.bounds = new google.maps.LatLngBounds(sw, ne);
    this.image = image;
    this.div = null;
    // 移除这里的this.setMap(map)，由外部控制Overlay的挂载时机
}
MapOverlay.prototype = new google.maps.OverlayView();

2. 给onRemove方法增加空值保护 #

即使生命周期逻辑调整后，也可能因为异步时机问题出现this.div为null的情况，所以在移除DOM元素前先做安全判断：

MapOverlay.prototype.onRemove = function() {
    if (this.div && this.div.parentNode) {
        this.div.parentNode.removeChild(this.div);
        this.div = null;
    }
};

3. 优化初始化代码，减少重复的setMap调用 #

你的初始化代码里多次调用setMap，容易触发不必要的生命周期切换，改成只根据hidden状态调用一次：

addImageOverlay: function(bounds, url, hidden) {
    var ne = new google.maps.LatLng(bounds.northEast.latitude, bounds.northEast.longitude);
    var sw = new google.maps.LatLng(bounds.southWest.latitude, bounds.southWest.longitude);
    var b = new google.maps.LatLngBounds(sw, ne);
    
    if(this.imageOverlay){
        this.imageOverlay.setMap(null);
        this.imageOverlay = null;
    }
    
    this.imageOverlay = new MapOverlay(bounds, url);
    
    // 只根据hidden状态设置一次map
    if (!hidden) {
        this.imageOverlay.setMap(this.map);
    }
    
    return this.imageOverlay;
}

为什么这些修改能解决问题？ #

在3.32+版本中，Google Maps API对OverlayView的setMap调用做了更严格的异步处理：

• 原来在构造函数里直接调用setMap会让Overlay进入初始化流程，但如果后续又快速调用setMap(null)，很可能onAdd还没执行就触发了onRemove，导致this.div还是null。
• 移除构造内的setMap，统一由外部控制生命周期，再加上onRemove的空值判断，就能彻底避免这个报错。

你可以在onAdd和onRemove里加个console.log，测试下执行顺序是否正常，确保每次setMap(map)都能触发onAdd，setMap(null)触发onRemove时this.div已经存在。

内容的提问来源于stack exchange，提问作者user7009562