Angular局部视图加载Google地图问题：仅刷新页面时显示

这个问题很典型——Angular加载局部视图（partial）时，不会自动执行模板里的<script>标签，这就是为什么只有刷新页面地图才会渲染的原因。下面给你两种可靠的解决思路，推荐第一种指令的实现方式，更符合Angular的最佳实践：

方案1：使用Angular指令（推荐） #

Angular的指令专门用来处理DOM相关的操作，非常适合地图这种需要依赖DOM元素初始化的场景。

步骤1：修改局部视图模板 #

把原来模板里的<script>标签删掉，只保留地图容器，并添加自定义指令：

<!-- map -->
<div id="map" class="col-lg-12" map-loader></div>
<!-- /map -->

步骤2：创建地图加载指令 #

在你的Angular应用中定义一个mapLoader指令，把地图初始化逻辑放在指令的link函数里：

app.directive('mapLoader', function() {
  return {
    link: function(scope, element, attrs) {
      // 封装地图初始化逻辑
      function initMap() {
        const mapOptions = {
          zoom: 8,
          center: new google.maps.LatLng(12.00, 12.00),
          styles: [{ 
            featureType: "all", 
            elementType: "all", 
            stylers: [{ visibility: "on" }] // 补全你原本的样式配置
          }]
        };
        // 用当前指令绑定的DOM元素初始化地图
        const map = new google.maps.Map(element[0], mapOptions);
        
        // 可选：把地图实例挂载到scope上，方便后续控制器操作
        scope.mapInstance = map;
      }

      // 确保Google Maps脚本已加载完成再初始化
      if (typeof google !== 'undefined' && google.maps) {
        initMap();
      } else {
        // 兼容脚本加载较慢的情况，监听window加载完成事件
        window.addEventListener('load', initMap);
      }
    }
  };
});

这样，每当局部视图被加载、指令绑定到DOM元素时，地图就会自动初始化，不需要刷新页面。

方案2：在控制器中监听视图加载事件 #

如果你不想用指令，也可以在页面控制器里监听Angular的$viewContentLoaded事件，确保视图DOM渲染完成后再初始化地图：

修改PageCtrl控制器 #

app.controller('PageCtrl', function ($scope, $timeout) {
  console.log("Page Controller ready");

  // 监听局部视图加载完成事件
  $scope.$on('$viewContentLoaded', function() {
    // 用$timeout确保DOM已经完全渲染（避免容器还未挂载到页面的情况）
    $timeout(function() {
      initMap();
    });
  });

  // 地图初始化函数
  function initMap() {
    const mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(12.00, 12.00),
      styles: [{ 
        featureType: "all", 
        elementType: "all", 
        stylers: [{ visibility: "on" }]
      }]
    };
    const mapElement = document.getElementById('map');
    new google.maps.Map(mapElement, mapOptions);
  }
});

同时记得把局部视图里的<script>标签删掉，只保留地图容器。

关键注意事项 #

• 确保index.html中的Google Maps脚本和API Key配置正确，没有加载错误；
• 如果地图容器的高度是动态计算的（比如依赖父元素高度），初始化后可能需要触发地图 resize：google.maps.event.trigger(map, 'resize')，并重新设置中心点；
• 避免在Angular模板中直接嵌入<script>标签，这不符合Angular的设计模式，也容易引发类似的加载问题。

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