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

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>

效果很好，可以完美加载地图。但是当我离开然后返回页面时，地图显示为灰色：

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

Answer 1

似乎只有当 center 属性的值作为地址值（例如 Times Square, New York, NY）提供时才会发生。在这种情况下，确定地图中心的方式包括以下步骤：

自ng-map leverages Google Maps Geocoding API起调用相应方法解析实际位置(lat,lng)
地图对象center属性正在更新

由于当中心属性作为位置值（例如 [40.759011, -73.98447220000003]）提供时我从未发生过这个问题，所以我建议更改地图的初始化方式：

删除 center 属性的设置 center="Times Square, New York,NY"
改为设置地图中心，如下所示：

示例：通过地址设置地图中心

NgMap.getMap("iPadFeedMap").then(function (map) {
     NgMap.getGeoLocation($scope.address)
     .then(function (latlng) {
            map.setCenter(latlng);
     });
});
$scope.address = "Times Square, New York, NY";

Demo

Answer 2

无论 center 是如何设置的，我都遇到了完全相同的问题（lat/lng 和物理地址都失败了），但接受的答案对我来说不太适用。

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

<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 都会运行并重新初始化地图。现在每次都能正确显示。

通读这篇文章很有帮助：https://github.com/allenhwkim/angularjs-google-maps/issues/387

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

How can I reinitialize ngMaps when changing routes in Angular, using ui-router?

google-maps

google-maps-api-3

angularjs

ng-map