1

我是ng-map的创建者。

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

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

如何强制执行此请求？

请看我的插件：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) 的中心。

谢谢，罗伯托。

4

1 回答 1

2

为了解决这个问题，

  1. 从指令，传递map给控制器​​以进行地图访问。
  2. 使用 $q 将 GeoCoder 创建为服务，并使用 $rootScope.$apply 进行异步。加工
  3. 使用控制器中的 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

于 2013-12-19T20:03:02.787 回答