动态加载Google Maps切换语言时自动补全报错问题

问题描述 #

• 异常场景：页面加载后未使用自动补全搜索框，直接切换语言并重新加载Google Maps脚本，之后尝试查询地址时触发报错：

Uncaught TypeError: e.Rz is not a function
at Object.c [as _46nw80] (common.js:115:253)
at AuthenticationService.Authenticate?1shttps%3A%2F%2Fwww.url.com&4skey&callback=_xdc_._46nw80&key=key&token=127529:1:28

• 正常场景：若先使用自动补全功能再切换语言，则无报错。当前加载脚本代码如下：

function loadScript(lang) {
        document.querySelectorAll('script[src^="https://maps.googleapis.com"]').forEach(script => {
            script.remove();
        });
        
        if (google) {
            google.maps.event.clearListeners(autocomplete, 'place_changed');
            delete google.maps;
        }

        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?key=xxx&libraries=places&callback=initAutocomplete';
        script.src += '&language=' + lang;
        script.id = "google-maps-script";
        document.body.appendChild(script);
    }

脚本初始在window.onload()触发，用户切换下拉菜单语言时重新加载。

问题原因 #

直接删除google.maps对象+移除脚本的方式，无法彻底清理Google Maps的全局状态和未初始化的自动补全实例残留。当未使用过自动补全时，autocomplete实例未被正确初始化，此时调用google.maps.event.clearListeners会导致全局引用混乱，后续加载新脚本时出现函数未定义的错误。

修复方案 #

修改loadScript函数，确保彻底清理旧实例与全局状态，再加载新语言版本的脚本：

// 全局维护自动补全实例
let autocomplete = null;

function initAutocomplete() {
    // 原有自动补全初始化逻辑示例
    const input = document.getElementById('autocomplete-input');
    autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.addListener('place_changed', onPlaceChanged);
}

function onPlaceChanged() {
    // 原有地址选择处理逻辑
}

function loadScript(lang) {
    // 1. 彻底销毁自动补全实例及所有关联事件
    if (autocomplete) {
        google.maps.event.clearInstanceListeners(autocomplete);
        google.maps.event.clearListeners(autocomplete, 'place_changed');
        autocomplete = null;
    }

    // 2. 移除所有Google Maps相关脚本
    document.querySelectorAll('script[src^="https://maps.googleapis.com"]').forEach(script => {
        script.remove();
    });

    // 3. 重置Google全局变量，避免残留引用干扰
    if (window.google) {
        window.google.maps = undefined;
        window.google = undefined;
    }

    // 4. 加载新语言版本的脚本
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = `https://maps.googleapis.com/maps/api/js?key=xxx&libraries=places&callback=initAutocomplete&language=${lang}`;
    script.id = "google-maps-script";
    document.body.appendChild(script);
}

关键修改点 #

• 全局维护autocomplete实例，确保每次切换语言前能精准销毁
• 使用clearInstanceListeners清理实例的所有监听，而非仅单一事件
• 重置window.google相关变量为undefined，避免内存残留引用干扰新脚本加载
• 优化URL拼接方式，减少冗余操作

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