Question

我正在使用离子来显示Google地图上的优惠数据。它工作正常，除了点击任何标记，它打开最后的标记内容。 Follownig是我的谷歌地图js代码

shouldRecognizeSimultaneouslyWithGestureRecognizer

问题：点击谷歌地图上的任何标记，它总是打开最后一个标记。请帮忙。

Answer 1

我遇到了同样的问题并且花了很多时间来弄清楚发生了什么，所以我想为后代添加答案，哈哈。

首先，最好引用官方Google maps API docs并查看“活动部分”。我发现有一个界面可以将事件监听器添加到我以前从未见过的标记中（即使在谷歌搜索这个问题几个小时之后）。

marker.addListener('click', function() {});

google.maps.event.addListener(marker, 'click', function () {});

它向我指出了这样的想法：当你尝试使用“旧”方式在循环中完成它时，你的标记变量显然等于marker数组的最后一个元素。当事件真的可以被触发时，你的初始化过程就完成了，这意味着你的变量在真正被调用的那一刻在匿名函数中总是有错误的值。所以，再次，您没有将marker作为参数传递给该匿名事件处理程序。

但你仍然可以做你想做的事。只需在事件处理程序中使用this.即可。贝娄是我的代码示例

marker.addListener('click', function() {
    var it = this;
    $scope.$apply(function() {
        $scope.activeEvent = EventService.getShort($scope.events[it.id]);
    });
});

我相信您也可以尝试在“旧式”界面中使用this.。

Answer 2

我遇到了同样的问题，我找到了解决方案here。显然，您只需要创建一个函数来创建标记并在for循环中调用该函数：

var map = new google.maps.Map(document.getElementById("map"), mapOptions);
$scope.map = map; //Attach the map to the scope before adding the markers

$scope.markers=[];

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

var createMarkers = function (benefit){
    //Info window's content
    var contentString = "<div><div><img class='shop-icon' src='" + benefit.shopicon + "' alt='" + benefit.shopName + "'/><span class='item-text-wrap'>" + benefit.shopName + "</span></div><div class='shop-offer'>"+benefit.benefits.short_benefitText+"</div><div class='card'><img class='card-art' src='"+benefit.cardart+"' alt='"+benefit.card+"'/></div></div>";
    var compiled = $compile(contentString)($scope);

    //Get location
    var locationLatLng = new google.maps.LatLng(benefit.location.lat, benefit.location.lng);

    //Create marker
    var marker = new google.maps.Marker({
        position: locationLatLng,
        map: map,
        title: benefit.shopName
    });

    google.maps.event.addListener(marker, 'click', function () {
        infoWindow.setContent(compiled[0]);
        infoWindow.open($scope.map, marker);
    });

    $scope.markers.push(marker);

}
//Loop in each benefits and place on Google map
if (typeof $scope.userBenefits !== "undefined" && $scope.userBenefits.length > 0) {
    for (var i = 0; i < $scope.userBenefits.length; i++) {
        var benefit = $scope.userBenefits[i];

        createMarkers(benefit);
    }
}

离子多标记谷歌地图打开最后一个标记

2 个答案: