angularjs - 在 Angular 中更改路线时，如何使用 ui-router 重新初始化 ngMap？

Question

我正在使用ngMap这是我的相关代码:

<div map-lazy-load="https://maps.google.com/maps/api/js" map-lazy-load-params="{{googleMapsUrl}}" ng-style="{'height': feedActualHeight + 'px'}">
        <ng-map id="iPadFeedMap" zoom="14" center="Times Square, New York, NY">
        </ng-map>
      </div>

这效果很好，可以完美加载 map 。但是当我离开页面然后返回页面时， map 会变灰:

有没有办法在加载此页面时重新初始化 map ？

Answer 1

无论center如何设置(纬度/经度和物理地址均失败)，我都遇到了完全相同的问题，但接受的答案对我来说不太有效。

我的解决方案是使用 NgMap 的 lazy-init 属性在每次返回 map 时重新初始化 map 。

<ng-map id="dashboard-map"
        center="Boston, MA"
        lazy-init="true"
        zoom="9"
        map-type-id="TERRAIN">
</ng-map>

在我的 ctrl 中，我使用以下代码 1)在 DOM 中找到未初始化的映射并 2)初始化它

// dashboardCtrl.js

NgMap.getMap({ id: "dashboard-map" }).
  then(function(map) {
    NgMap.initMap(map.id);
  });

这样，每次我点击仪表板时，ctrl 都会运行并重新初始化 map 。现在每次都能正确显示。

这是一个值得阅读的有用线索:https://github.com/allenhwkim/angularjs-google-maps/issues/387