1

私はng-mapの作成者です。

Googleマップを表示するために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) を中心として作成されていることがわかります。

ありがとう、ロベルト。

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 に答える