谷歌地圖不適用於AngularJS指令

我正在嘗試在AngularJS中開發一個指令來顯示Google地圖。我可以顯示地圖，但我想更進一步。我的指令將接受座標或地址。如果座標被設置，它會顯示一個標記。但是，如果座標不可用，那麼它應該嘗試使用地址和地理編碼顯示標記。

我的問題是，當我嘗試在指令內部運行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>

你可以看到，有一個城市（競技）（地址解析後）的標記，但地圖與其他城市中心之前創建（赫塔菲）。

謝謝，羅伯託。

來源

2013-11-20 Rober

要解決此問題，

從指令，傳遞給map控制器爲地圖的訪問。
使用$ q將GeoCoder創建爲服務，並且$ rootScope。$申請異步。處理
使用的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-19 20:03:02 allenhwkim

谷歌地圖不適用於AngularJS指令

回答

相關問題