Question

我是ng-map的创建者。

我正在尝试在AngularJS中开发一个指令来显示Google地图。我可以展示地图，但我想更进一步。我的指示将接受坐标或地址。如果设置了坐标，它将显示标记。但是，如果没有coords，那么它应该尝试使用地址和Geocode显示标记。

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

如何强制执行此请求？

请看我的plunker：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）。

谢谢，罗伯特。

Answer 1

要解决此问题，

从指令中，将map传递给控制器以进行地图访问。
使用$ q和$ rootScope创建GeoCoder作为服务。$ apply for async。处理
使用控制器中的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

Google地图无法在AngularJS指令中使用

1 个答案: