1

Google のジオコーダーに場所を送信し、緯度/経度を返し、マップを変更するフォームがあります。アイコンに ng-click を使用すると、アイコンを 2 回クリックしないと機能しません。フォームで ng-submit を使用すると、URL に追加され、タスクは実行されません。私はこれを機能させることに近づいているように感じますが、何が間違っているのかわかりません。

以下はフォームです

<li>
  <form action="" class="search-form" ng-submit="convertLatLonToAddress()">
      <div class="form-group has-feedback">
      <label for="search" class="sr-only">Search</label>
      <input type="text" class="form-control" name="search" id="search" placeholder="Search for an address or place name">
          <i class="fa fa-search form-control-indicator"></i>                        
    </div>
  </form>
</li>

そして、ここに関数があります

$scope.convertLatLonToAddress = function(){
  var address = $('#search').val();
  var geocoder = new google.maps.Geocoder();

  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var latitude = results[0].geometry.location.lat();
      var longitude = results[0].geometry.location.lng();
      // console.log(latitude + ' and ' + longitude);
      $scope.center.lat = latitude;
      $scope.center.lon = longitude;
    } 
  }); 
};

@PSL のおかげで修正されました。下記参照：

<li>
  <form class="search-form" ng-submit="convertLatLonToAddress(searchText)">
    <div class="form-group has-feedback">
      <label for="search" class="sr-only">Search</label>
      <input type="text" class="form-control" name="search" id="search" placeholder="Search for an address or place name" ng-model="searchText">
      <button style="visibility: hidden"></button>
        <a ng-click="convertLatLonToAddress(searchText)">
          <i class="fa fa-search form-control-indicator"></i>                        
        </a>
    </div>
  </form>
</li>

と

$scope.convertLatLonToAddress = function(searchText){
  // var address = $('#search').val();
  var address = searchText;
  var geocoder = new google.maps.Geocoder();

  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var latitude = results[0].geometry.location.lat();
      var longitude = results[0].geometry.location.lng();
      // console.log(latitude + ' and ' + longitude);
      $scope.center.lat = latitude;
      $scope.center.lon = longitude;
      $scope.$apply();
    } 
  }); 
};
4

2 に答える 2

2

は角度コンテキスト内では実行されないgeocodeため、の非同期呼び出し内でダイジェスト サイクルを手動で呼び出す必要があります。geocode

geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var latitude = results[0].geometry.location.lat();
      var longitude = results[0].geometry.location.lng();
      // console.log(latitude + ' and ' + longitude);
      $scope.center.lat = latitude;
      $scope.center.lon = longitude;
      $scope.$apply();
    } 
  });

クリックするたびng-clickにダイジェスト サイクルがトリガーされるため、前のサイクルで非角度非同期呼び出しが実行され、角度が認識されていないスコープが更新されます。もう一度クリックすると、ダイジェスト サイクルが再度実行され、同じことが行われますが、そのときは以前に設定した値がそのため、2 回のクリックが必要です。ng-submit実行するには、フォーム要素トリガーが必要です。たとえば、フォームで送信動作を発生させるbuttonまたは。本当にリダイレクトするつもりがない限り、フォームからinput type="submit"も削除する必要があります。action

それとは別に、ng-modelDOMから直接値を取得する代わりに、テキストボックスで使用して関数に値を渡すこともできます。

<input type="text" class="form-control" name="search" id="search" placeholder="Search for an address or place name" ng-model="searchText">

ng-clickasを介して値を渡し、ng-click="convertLatLonToAddress(searchText)"関数内で使用します。

コントローラーで回避するために、Angular サービスにscope.apply();抽象化して Promise を返し (遅延オブジェクトを作成)、コントローラーでそのサービスを使用できます。geoCoder

myApp.service('geoCoderService', ['$q', function($q){
      this.getCoordinates = function(address){
          var defer = $q.defer();
           var geocoder = new google.maps.Geocoder();

          geocoder.geocode( { 'address': address}, function(results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
             var latitude = results[0].geometry.location.lat();
             var longitude = results[0].geometry.location.lng();
             return defer.resolve({latitude :latitude , longitude :longitude });
           } 
          //faliure
          defer.reject(status);
       }); 
          return defer.promise;
      }

});

以下を使用してデータを挿入geoCoderServiceおよび取得します。

 geoCoderService.getCoordinates(address).then(function(coordinates){
     //populate it
 }).catch(function(errorStatus){  /*ooops Error*/ })
于 2015-10-30T14:39:50.657 に答える
0

これを試して

 var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope) {
   $scope.convertLatLonToAddress = function() {
     var address = $('#search').val();
     var geocoder = new google.maps.Geocoder();
     geocoder.geocode({
       'address': address
     }, function(results, status) {
       if (status == google.maps.GeocoderStatus.OK) {
         $scope.lat = results[0].geometry.location.lat();
          $scope.lon = results[0].geometry.location.lng();
         console.log($scope.lat + ' and ' + $scope.lon);
         setTimeout(function(){$scope.$apply();},0)
       }
     });
   };
 });
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <li>
      <div class="form-group has-feedback">
        <label for="search" class="sr-only">Search</label>
        <input type="text" class="form-control" name="search" id="search" placeholder="Search for an address or place name">
        <i class="fa fa-search form-control-indicator"></i> 
        <button ng-click="convertLatLonToAddress()">Click</button>
        <br>
       Lat :  <input type="text" ng-model="lat"><br>
       Lon :  <input type="text" ng-model="lon">
        
      </div>
    </li>
  </div>
</body>

于 2015-10-30T15:03:55.990 に答える