带有动态地理坐标更新的 angularjs 中的谷歌地图延迟加载？答案

【问题标题】：Google Maps lazy loading in angularjs with dynamic geo coordinate updates?带有动态地理坐标更新的 angularjs 中的谷歌地图延迟加载？
【发布时间】：2016-04-20 10:30:47
【问题描述】：

我创建了一个directive 用于延迟加载google maps 和angularjs：

http://plnkr.co/edit/1NpquJ?p=preview

取自： AngularJS - load google map script async in directive for multiple maps

问题：如何将lat/long 值动态绑定到控制器，以便每次控制器中的值更改时，地图也会更改视图？（例如，后端调用提供新的 lat/long 值，然后必须将其推送到地图元素）。

我添加到 maps 指令中：

  scope: {
      lat: '=',
      long: '='
  }

并通过以下方式双向绑定：

<div lat="{{lat}}" long="{{long}}" />

控制器：

$http..getBackendData()
    .then(function(data) {
        $scope.lat = data.lat;
        $scope.long = data.long;
    }
);
...

无论如何，地图只显示初始值，但永远不会更新。示例：http://plnkr.co/edit/U31poBpHTfFVQsipLrI4?p=preview

【问题讨论】：

标签： javascript angularjs google-maps

【解决方案1】：

现在它可以在latitude 上添加$watch：

http://plnkr.co/edit/eS18B0Te2l5qaf6wvQIH?p=preview

scope.$watch('lat', function (newVal) {
    initializeMap();
});

但我不知道这是否是正确的方法。如果您有更好的解决方案，请随时发表评论。

【讨论】：