Question

我已经使用AngularJS搜索了几乎所有关于Google Maps API的博客和教程，但我无法获得解决方案。

基本上，我正在尝试创建一个地图，

将通过GPS设置标记。
当用户移动标记时，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-bind 中看到更改的值一部分。

欢迎任何形式的帮助。

编辑 - 我也尝试了ng-model。

Answer 1

自从{em> Angular事件循环之外触发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>

与谷歌地图

1 个答案: