单击 Google 地图中的标记 AngularJS 应用程序不会更新显示的数据

Question

我在 AngularJS 中有一个非常简单的 Google 地图实现。它会显示一个搜索框，键入任何位置都会在下面的地图上添加一个标记。在该地图下方有一个简单的标签 "Position:"，当我单击该标记时我想更新它。绑定变量值已更新，但未反映在页面上。这里有什么问题。这是 Plunker 上的完整代码。

Plunker

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Angular Google Maps</title>

    <!-- Styles -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
    <style type="text/css">
        h3 img {
            max-height: 50px;
        }
        #map { 
            height: 400px;
            margin: 20px 0;
            border-radius: 5px;
            border: 1px solid silver;
        }
    </style>
</head>
<body>

<div class="container" ng-app="myApp" ng-controller="newPlaceCtrl">
    
    <h3 class="clearfix">
        <img class="pull-left" src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/AngularJS_logo.svg/695px-AngularJS_logo.svg.png"/>
        <img class="pull-right" src="http://upload.wikimedia.org/wikipedia/commons/9/9a/Google_maps_logo.png"/>
    </h3>
    
    <div class="alert alert-danger text-center" role="alert" ng-show="apiError">
        <b>API Error : </b>
        <span>{{ apiStatus }}</span>
    </div>
    
    <form name="searchForm" novalidate 
    ng-submit="search()">
        <div class="input-group">
            <input name="place" type="text" class="form-control" 
            ng-model="searchPlace" required autofocus />
            <span class="input-group-btn">
                <button class="btn btn-primary" 
                ng-disabled="searchForm.$invalid">Search</button>
            </span>
        </div>
    </form>
        
    <div id="map"></div>
    
    <div><strong>Position:</strong> {{ pos }} </div>

    <form name="resForm" class="form-horizontal" novalidate 
    ng-submit="send()">
        <div class="form-group">
            <label for="resName" class="col-xs-2 control-label">Name</label>
            <div class="col-xs-10">
                <input name="resName" type="text" class="form-control" 
                ng-model="place.name" required />
            </div>
        </div>
        <div class="form-group">
            <label for="resLat" class="col-xs-2 control-label">Latitude</label>
            <div class="col-xs-10">
                <input name="resLat" type="number" class="form-control" 
                ng-model="place.lat" required />
            </div>
        </div>
        <div class="form-group">
            <label for="resLng" class="col-xs-2 control-label">Longitude</label>
            <div class="col-xs-10">
                <input name="resLng" type="number" class="form-control" 
                ng-model="place.lng" required />
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <button class="btn btn-success" 
                ng-disabled="resForm.$invalid">Confirm</button>
            </div>
        </div>
    </form>
    
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyC2CzzxH7VsJNWcKobDZzEKfZoyzp4QYkI&libraries=places"></script>
<script type="text/javascript">
    var app = angular.module('myApp', []);

app.service('Map', function($q) {
    
    this.init = function() {
        var options = {
            center: new google.maps.LatLng(40.7127837, -74.00594130000002),
            zoom: 13,
            disableDefaultUI: true    
        }
        this.map = new google.maps.Map(
            document.getElementById("map"), options
        );
        this.places = new google.maps.places.PlacesService(this.map);
    }
    
    this.search = function(str) {
        var d = $q.defer();
        this.places.textSearch({query: str}, function(results, status) {
            if (status == 'OK') {
                d.resolve(results[0]);
            }
            else d.reject(status);
        });
        return d.promise;
    }
    
    this.addMarker = function(res) {
        if(this.marker) this.marker.setMap(null);
        this.marker = new google.maps.Marker({
            map: this.map,
            position: res.geometry.location,
            animation: google.maps.Animation.DROP
        });
        this.map.setCenter(res.geometry.location);
        return this.marker;
    }
});

app.controller('newPlaceCtrl', function($scope, Map) {
    
    $scope.place = {};
    $scope.pos = 'a';
    
    $scope.search = function() {
        $scope.apiError = false;
        Map.search($scope.searchPlace)
        .then(
            function(res) { // success
                var marker = Map.addMarker(res);
                
                /****************************************************************/
                /* DOESNT WORK */
                /****************************************************************/
                marker.addListener('click', function(e) {
                    console.log($scope.pos);
                    $scope.pos = res.name;
                    console.log($scope.pos);    // *** varaible value is updated here but not displayed on page
                });

                /* NEITHER THIS */
                // google.maps.event.addListener(marker, 'click', function () {
                //     console.log($scope.pos);
                //     $scope.pos = res.name;
                //     console.log($scope.pos);
                // });

                /****************************************************************/

                $scope.place.name = res.name;
                $scope.place.lat = res.geometry.location.lat();
                $scope.place.lng = res.geometry.location.lng();
            },
            function(status) { // error
                $scope.apiError = true;
                $scope.apiStatus = status;
            }
        );
    }
    
    $scope.send = function() {
        alert($scope.place.name + ' : ' + $scope.place.lat + ', ' + $scope.place.lng);    
    }
    
    Map.init();
});

</script>

</body>
</html>

Answer 1

你非常接近。首先，$scope.pos 应该是一个空字符串，所以删除 'a' 并更改为 $scope.pos = '';

接下来，像这样在您的侦听器中添加一个 $scope.$apply 函数

marker.addListener('click', function(e) {
    $scope.$apply(function(){
        $scope.pos = res.name;
    });
});

单击 Google 地图中的标记 AngularJS 应用程序不会更新显示的数据

Clicking on Marker in Google Maps in AngularJS app doesn't update data displayed

data-binding

google-maps

google-maps-markers

angularjs