谷歌地图在 AngularJS 指令中不起作用答案

【问题标题】：Google Maps not working in AngularJS directive谷歌地图在 AngularJS 指令中不起作用
【发布时间】：2013-11-20 21:19:27
【问题描述】：

我是ng-map的创建者。

我正在尝试在 AngularJS 中开发一个指令来显示谷歌地图。我可以显示地图，但我想更进一步。我的指令将接受坐标或地址。如果设置了坐标，它将显示一个标记。但是，如果坐标不可用，则应尝试使用地址和地理编码显示标记。

我的问题是当我尝试在指令中运行地理编码函数时，这个请求看起来是异步的，其余代码在我得到响应之前执行。

如何强制执行这个请求？

请看我的插件：http://plnkr.co/edit/QRj6jXQYxSRR3CseavQY?p=preview

<div class="span12">

    {{center}}
    <label>Address</label>
    <input type="text" ng-model="completeAddress" class="input-xxlarge input-height-large" placeholder="Type your business address...">     
    <map id="map_canvas" style="height: 452px; margin-bottom: 20px;"></map> 

    <button class="btn btn-primary btn-large pull-right" style="margin-bottom: inherit" ng-click="setBusinessLocation()">Save</button>  
</div>

您可以注意到，在一个城市 (Gijon) 中有一个标记（在地理编码之后），但地图是之前创建的，中心在另一个城市 (Getafe)。

谢谢，罗伯托。

【问题讨论】：

标签： angularjs google-maps angularjs-google-maps

【解决方案1】：

要解决问题，

从指令中，将map 传递给控制器以进行地图访问。
使用 $q 将 GeoCoder 创建为服务，并使用 $rootScope.$apply 进行异步。处理
使用控制器中的 GeoCoder，如果需要，在地图指令中使用 GeoCoder(address).then(...) 的形式在完成地理编码查找时显示标记

这是服务部分。

app.service('GeoCoder', function($q, $rootScope) {
    return {
      getLocations : function(address) {
        var deferred = $q.defer();
        var geocoder = new google.maps.Geocoder();
        console.log('address', address);
        geocoder.geocode({'address': address }, function (results, status) {
          $rootScope.$apply(function() {
            if (status == google.maps.GeocoderStatus.OK) {
              deferred.resolve(results);
            }
          });
        });
        return deferred.promise;
      }
    }
});

这是从控制器地址添加标记的功能

  $scope.addMarkerFromAddress = function() {
    GeoCoder.getLocations($scope.address).then(function(results) {
      var latLng = results[0].geometry.location;
      var marker = new google.maps.Marker({
        map: $scope.map, 
        position: latLng
      });
      $scope.map.setCenter(latLng);
    });
  };

最后，这是演示，http://plnkr.co/edit/9gkanMqVZCldZjYZ5oA2?p=preview

【讨论】：