如何隐藏Google Maps无效API密钥默认提示并自定义错误弹窗

核心思路 #

Google Maps API提供了gm_authFailure全局回调用于处理鉴权失败场景，同时我们可以通过DOM操作隐藏其默认生成的错误提示框。结合ExtJS特性，可实现自定义错误弹窗。

1. 隐藏默认错误提示 #

当API密钥无效时，Google会自动在页面插入一个带gm-err-container类的div，我们可以在鉴权失败回调中定位该元素并隐藏/移除：

// 在gm_authFailure回调中添加
var gmErrContainer = document.querySelector('.gm-err-container');
if (gmErrContainer) {
    gmErrContainer.style.display = 'none'; // 隐藏，或用gmErrContainer.remove()直接移除
}

2. 捕获错误并显示自定义弹窗 #

利用官方指定的gm_authFailure回调，处理完默认提示后，触发ExtJS延迟任务显示自定义警告。

修改后的完整代码 #

hdr_loadGoogleMap: function() {
    var me = this,
        vFormPanel = me.getFormPanel(),
        vFldValues = vFormPanel.getFldValues(['install_gmapikey','install_gmapid','install_gmapcoor','install_gmaptype']),
        vContainer = vFormPanel.down('container[hostCmpId=mapContainer]'),
        vLat,
        vLng,
        vGmapcoor = vFldValues['install_gmapcoor'].split(','),
        vGMapTypes = {
            'map': 'roadmap',
            'satellite': 'satellite',
            'terrain': 'terrain',
            'labels': 'hybrid'
        };

    vLanguageCode ='en';
    Ext.Loader.loadScript({
        // 修复硬编码密钥，改为从表单读取配置
        url: 'https://maps.googleapis.com/maps/api/js?key=' + vFldValues['install_gmapikey'] + '&v=3.55&language='+vLanguageCode,
        onLoad: function () {
             me.hdr_gmap = Ext.create('Ext.panel.Panel', {
                layout: 'fit',
                header: false,
                border: false,
                itemId: 'map',
                style: 'padding: 0; border-width: 0;',
                draggable: false,
                height: 290,
                width: 350,
                items: [{
                    xtype: 'uxgmappanel',
                    useCurrentLocation: true,
                    center: {
                        lat: vLat,
                        lng: vLng
                    },
                    mapOptions: {
                        zoom: 14,
                        mapTypeId: vGMapTypes[(vFldValues['install_gmaptype']) ? vFldValues['install_gmaptype'].toLowerCase(): 'map'], 
                        mapId: vFldValues['install_gmapid']
                    }
                }]
            });
            vContainer.add(me.hdr_gmap);
        },
        // 新增：处理API脚本加载失败（如网络问题）
        onError: function() {
            alert('无法加载Google Maps服务，请检查网络连接');
        }
    });

    // 全局鉴权失败回调
    window.gm_authFailure = function() {
        // 隐藏Google默认错误提示
        var gmErrContainer = document.querySelector('.gm-err-container');
        if (gmErrContainer) {
            gmErrContainer.style.display = 'none';
        }

        // 显示自定义警告弹窗
        var vDelayedTask = new Ext.util.DelayedTask(function() {
            // 可替换为项目国际化常量：alert(MSG_ERR_JS_INAVLID_GAPIKEY_GMAPID);
            alert('无效的Google Maps API密钥或Map ID，请检查配置');
        });
        vDelayedTask.delay(300);
    };
}

关键修改说明 #

• 替换原代码硬编码的invalidkey，改为从表单配置读取API密钥，提升灵活性
• 新增onError回调，处理API脚本加载失败的场景（如网络不通）
• 在gm_authFailure中添加隐藏默认错误提示的逻辑，避免用户看到原生的"Oops!"提示
• 自定义弹窗提示更清晰，也可保留原项目的国际化常量

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