如何更换ngmap使用的Google Maps API Key？多账户切换优化

核心问题原因 #

当前懒加载逻辑仅在首次渲染时加载一次绑定旧API密钥的脚本，切换账户后虽然mapUrl已更新，但全局的google.maps对象未被清理，新密钥的脚本无法覆盖加载，导致地图仍使用旧密钥。

解决方案步骤 #

1. 切换账户时清理旧地图实例与全局对象 #

在账户切换的回调逻辑中，先销毁现有地图实例，再移除Google Maps的全局对象和已加载的脚本：

// 1. 销毁地图实例（基于ng-map）
const map = ngMap.getMap('map_canvas');
if (map) {
  map.setMap(null); // 销毁地图实例
}

// 2. 移除地图DOM元素
const mapCanvas = document.getElementById('map_canvas');
if (mapCanvas) mapCanvas.remove();

// 3. 清理全局Google对象
delete window.google;

// 4. 删除已加载的Google Maps脚本标签
const mapScripts = document.querySelectorAll('script[src*="maps.google.com/maps/api/js"]');
mapScripts.forEach(script => script.remove());

2. 重新渲染地图容器并触发懒加载 #

清理完成后，重新生成地图容器DOM，并触发懒加载逻辑（以Angular环境为例）：

// 重新创建ng-map元素
const mapWrap = document.getElementById('mapwrap');
mapWrap.innerHTML = `<ng-map id="map_canvas" map-type-id="{{mc.initMapType}}" lazy-init="true">...</ng-map>`;

// 重新编译DOM（Angular中需要注入$compile和$scope）
$compile(mapWrap)($scope);
$scope.$apply();

3. 优化懒加载指令（可选） #

如果希望自动监听密钥变化，可自定义改进版懒加载指令，监听map-lazy-load-params的变化并自动重新加载：

angular.module('yourApp').directive('mapLazyLoad', ['$window', '$q', function($window, $q) {
  return {
    restrict: 'A',
    scope: {
      mapLazyLoadParams: '@'
    },
    link: function(scope, element) {
      let loadPromise;

      const loadMapScript = () => {
        const scriptSrc = `${element.attr('map-lazy-load')}?${scope.mapLazyLoadParams}`;
        const script = document.createElement('script');
        script.src = scriptSrc;
        script.async = true;
        script.defer = true;

        loadPromise = $q((resolve, reject) => {
          script.onload = () => resolve();
          script.onerror = () => reject(new Error('地图脚本加载失败'));
        });

        document.body.appendChild(script);
        return loadPromise;
      };

      // 首次加载
      loadMapScript();

      // 监听参数变化，自动重新加载
      scope.$watch('mapLazyLoadParams', (newParams, oldParams) => {
        if (newParams !== oldParams) {
          // 清理旧资源
          delete window.google;
          document.querySelectorAll('script[src*="maps.google.com/maps/api/js"]').forEach(s => s.remove());
          // 重新加载并触发地图初始化
          loadMapScript().then(() => {
            element.find('ng-map').trigger('init');
          });
        }
      });
    }
  };
}]);

关键注意事项 #

• 必须删除window.google全局对象，否则浏览器会认为Google Maps脚本已加载，不会重新请求新密钥的脚本
• 销毁地图实例时要调用setMap(null)，避免内存泄漏
• 重新编译DOM时需确保Angular的$scope已更新新的mapUrl参数

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