禁止在Angularjs路线更改上重新加载谷歌地图答案

【问题标题】：Inhibit google map reload on Angularjs route change禁止在Angularjs路线更改上重新加载谷歌地图
【发布时间】：2016-12-09 14:06:42
【问题描述】：

我有一个谷歌地图作为我网站的背景。它用于单独的路线，以向各种路线中显示的数据添加视觉特征。我想确保这不会在每次路线更改时重新加载，这会导致非常烦人且视觉上不悦的白色闪光。

我认为我可以通过将其移出我的 ng-view 来实现这一点，因为外面的一切都应该是静态的（所以我想）。

<div id="map"></div>
<div ng-view class="main-container"></div>

我的js来初始化地图

function initMap() {
    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(50, 10),
        mapTypeIds: "ROADMAP",
        mapTypeControl: false,
        styles: [/*map styles*/]
    };

    var mapElement = document.getElementById('map');
    map = new google.maps.Map(mapElement, mapOptions);
    var infoWindow = new google.maps.InfoWindow();

}

目前，在与视图对应的每个控制器中都会调用此方法（否则在路由更改后将不会加载）。

如何在更改路线后立即停止重新加载或删除？

【问题讨论】：

当每个控制器调用 initMap 函数时，它每次都会重新加载。如果您不想重新加载，请在初始化应用程序时调用它并仅根据控制器更改中心坐标。
谢谢，成功了。我现在觉得自己很蠢。

标签： javascript angularjs google-maps google-maps-api-3 angularjs-ng-route

【解决方案1】：

将 initMap() 从 Angular 视图控制器中移出到站点的初始化点。

【讨论】：