谷歌地图动态创建标记点击事件使用相同的标记

时间:2015-04-08 16:30:42

标签: javascript jquery google-maps google-maps-api-3

所以我有一个从我的数据库中获取大量目的地的ajax帖子。 我遍历它们并在我的地图上为每一个添加一个标记。 我还为每一个添加了一个点击事件,这样我就可以点击它们,但点击事件会将最后一个标记作为输入创建,所以无论我按哪一个我都会得到相同的标记无关紧要在我的点击事件中。 这是我的代码:

    success: function (data) {
        for (destination in data) {
            var latlng = { lat: data[destination].Latitude, lng: data[destination].Longitude }
            console.log(data[destination].Id);
            console.log(data[destination]);
            var marker = new google.maps.Marker({
                map: map,
                postion: new google.maps.LatLng(latlng.lat, latlng.lng),

            });
            marker.set("id", data[destination].Id);

            marker.setIcon( /** {google.maps.Icon} */({
                url: '/Content/Markers/green_MarkerX.png',
                size: new google.maps.Size(71, 71),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(17, 34),
                scaledSize: new google.maps.Size(35, 35)
            }));
            marker.setPosition(latlng);
            marker.setVisible(true);

            google.maps.event.addListener(marker, 'click', function () {
                console.log("MARKER");
                console.log(marker);
                console.log("MarkerID");
                console.log(marker.get('id'));
            });
        }
    },

所以console.log(marker.get('id'));始终是相同的,console.log(标记)始终是相同的标记。如何让听众添加特定标记?

1 个答案:

答案 0 :(得分:5)

似乎是闭包的问题..它总是返回最后一个知道标记..你必须将clickhandler的一部分带到一个新函数(外部)。

信息:https://developers.google.com/maps/documentation/javascript/events?csw=1#EventClosures

将addEventListener替换为addClickHandler(marker);

function addClickHandler(theMarker) {
google.maps.event.addListener(theMarker, 'click', function() {
console.log(theMarker.get('id'));
  });
}