谷歌地圖ng-bind問題

Question

我已經搜索了幾乎所有關於谷歌地圖API與AngularJS的博客和教程，但我無法得到解決方案。

基本上，我想創建一個地圖中，

1. 標記將從GPS設置。
2. 當用戶移動標記時，HTML中的標記座標值將會改變。

這裏是HTML代碼段

<div class="row"> 
    <div id="map" style="height: 400px; width: 400px"> 
    </div> 
</div> 
<div class="row" ng-show="showResult()"> 
    <span ng-bind="latlng.lat"></span><br /> <!--Here I want to see the change --> 
    <span ng-bind="latlng.lng"></span><br /> <!--Here I want to see the change --> 
    <span id="current"></span> <!-- Just for testing purpose--> 
</div> 

這裏是AngularJS片斷

$scope.latlng = {lat: -1 ,lng: -1}; 
google.maps.event.addListener($scope.marker, 'dragend', function (evt) { 
     document.getElementById('current').innerHTML = '<p>Lat: ' + evt.latLng.lat().toFixed(3) + 'Lng: ' + evt.latLng.lng().toFixed(3) + '</p>'; 

     $scope.latlng.lat = evt.latLng.lat(); 
     $scope.latlng.lng = evt.latLng.lng(); 

     console.log($scope.latlng.lat+"\n"+$scope.latlng.lng); 
//console.log is just to check if my variables are getting changed or not 
     $scope.map.setCenter($scope.marker.position); 
     $scope.marker.setMap($scope.map); 
}); 

我希望我已經作出了明確的自我。現在

，我問題是：

當我移動標記，我可以很容易地看到改變的值我電流id裏面，但我看不到NG綁定更改後的值部分。

歡迎任何形式的幫助。

編輯 - 我也嘗試過ng模型。

Answer 1

它發生，因爲dragend事件被觸發外角事件循環，你需要$apply功能包裝的變化：

$scope.$apply(function() { 
    $scope.latlng.lat = evt.latLng.lat(); 
    $scope.latlng.lng = evt.latLng.lng(); 
}); 

工作實例

angular.module('mapApp', []) 
 
    .controller('mapController', function ($scope) { 
 

 
     $scope.latlng = {lat: -1 ,lng: -1}; 
 

 
     $scope.map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 4, 
 
      center: new google.maps.LatLng(59.339025, 18.065818) 
 
     }); 
 

 
     
 

 
     $scope.marker = new google.maps.Marker({ 
 
       position: new google.maps.LatLng(59.339025, 18.065818), 
 
       map: $scope.map, 
 
       draggable:true 
 
     }); 
 

 
     $scope.showResult = function(){ 
 
      return true; 
 
     } 
 

 
     google.maps.event.addListener($scope.marker, 'dragend', function (evt) { 
 
      document.getElementById('current').innerHTML = '<p>Lat: ' + evt.latLng.lat().toFixed(3) + 'Lng: ' + evt.latLng.lng().toFixed(3) + '</p>'; 
 

 
      $scope.$apply(function() { 
 
       $scope.latlng.lat = evt.latLng.lat(); 
 
       $scope.latlng.lng = evt.latLng.lng(); 
 
      }); 
 
      //console.log($scope.latlng.lat+"\n"+$scope.latlng.lng); 
 

 
      $scope.map.setCenter($scope.marker.position); 
 
      $scope.marker.setMap($scope.map); 
 
     }); 
 
     
 
     
 
    });

<script src="https://maps.google.com/maps/api/js"></script> 
 
<script src="https://code.angularjs.org/1.3.15/angular.js"></script> 
 

 
<div ng-app="mapApp" ng-controller="mapController"> 
 
     
 

 
    <div class="row"> 
 
     <div id="map" style="height: 400px; width: 400px"></div> 
 
    </div> 
 

 
    <div class="row" ng-show="showResult()"> 
 
     <span ng-bind="latlng.lat"></span><br /> <!--Here I want to see the change --> 
 
     <span ng-bind="latlng.lng"></span><br /> <!--Here I want to see the change --> 
 
     <span id="current"></span> <!-- Just for testing purpose--> 
 
    </div> 
 
    
 
</div>