单击 Google Maps 标记时突出显示 ng-repeat 元素

Question

请看看这个demo 我试图弄清楚当点击地图上相应的谷歌地图标记时如何突出显示 ng-repeat 元素。如您所见，它在您单击 ng-repeat 元素时有效，但在您单击标记时无效。

HTML 结构：

<div ng-app="mapsApp" ng-controller="MapCtrl">
<div id="map"></div>
<div ng-repeat="marker in markers"
                ng-class="{active: $index == markerId}"     >
     <a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a>
</div>

角度代码：

angular.module('mapsApp', []).controller('MapCtrl', function ($scope) {

var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(40.0000, -98.0000),
    mapTypeId: google.maps.MapTypeId.TERRAIN
}

$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

$scope.markers = [];

var infoWindow = new google.maps.InfoWindow();

var createMarker = function (info){

    var marker = new google.maps.Marker({
        map: $scope.map,
        position: new google.maps.LatLng(info.lat, info.long),
        title: info.city
    });
    marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';


    google.maps.event.addListener(marker, 'click', function(){
        infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
        infoWindow.open($scope.map, marker);

        $scope.markerId = $scope.markers.indexOf(marker);
    });

    $scope.markers.push(marker);

}  

for (i = 0; i < cities.length; i++){
    createMarker(cities[i]);
}

$scope.openInfoWindow = function(e, selectedMarker){
    e.preventDefault();
    google.maps.event.trigger(selectedMarker, 'click');
}

});

数据对象：

var cities = [
{
    city : 'Toronto',
    desc : 'This is the best city in the world!',
    lat : 43.7000,
    long : -79.4000
},
{
    city : 'New York',
    desc : 'This city is aiiiiite!',
    lat : 40.6700,
    long : -73.9400
},
{
    city : 'Chicago',
    desc : 'This is the second best city in the world!',
    lat : 41.8819,
    long : -87.6278
},
{
    city : 'Los Angeles',
    desc : 'This city is live!',
    lat : 34.0500,
    long : -118.2500
},
{
    city : 'Las Vegas',
    desc : 'Sin City...\'nuff said!',
    lat : 36.0800,
    long : -115.1522
}
];

Answer 1

由于点击处理程序超出了角度范围，您需要手动告诉它检查更改。所以你必须自己打电话给$scope.$digest()。

但是您的代码触发点击会导致摘要循环。

因此，您应该在 $scope.openInfoWindow 方法中收集所有信息框代码

$scope.openInfoWindow = function(e, selectedMarker){
    e && e.preventDefault();

    infoWindow.setContent('<h2>' + selectedMarker.title + '</h2>' + selectedMarker.content);
    infoWindow.open($scope.map, selectedMarker);
    $scope.markerId = $scope.markers.indexOf(selectedMarker);        
}

并更改您的点击处理程序以调用此方法

google.maps.event.addListener(marker, 'click', function(){
        $scope.openInfoWindow(null, marker);
        $scope.$digest();
    });

http://jsfiddle.net/gaby/19hfoxh8/的演示