如何使用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如何设置（使用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

Answer 2

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

• 由于ng-map利用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