Javascript 如何知道谷歌地图上点击了哪个标记

我正在用Google Maps JavaScript API v3做一个小的HTML5项目，使用JavaScript、CSS和HTML

在这个小应用程序中，我的目标是向地图添加标记，单击每个标记后，显示有关标记的一些信息

我的第一个方法是：

var markersArray = [];

// Adds a marker to the map and push to the array.
function addMarker(location) {
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        draggable: true,
        animation: google.maps.Animation.DROP,
        label: markersArray.length + "",
        title: markersArray.length + ""
    });
    markersArray.push(marker);
    marker.addListener('click', function() {
        clickMarkerEvent(markersArray.length - 1);
    });
}

//listener
function clickMarkerEvent(index) {
    alert(markersArray[index].getTitle());
}

但是，当我单击该标记时，我仅获取有关地图上最后一个标记的信息。听者失败了

我试图通过在JavaScript中使用作用域来纠正这个问题，我甚至还看了一下绑定，但是，这些都不起作用

最后，我想出了一个完全不同的主意：

var markersArray = [];
var lastMarkerClicked;    

function addMarker(location) {
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        draggable: true,
        animation: google.maps.Animation.DROP,
        label: markersArray.length + "",
        title: markersArray.length + ""
    });
    markersArray.push(marker);
    marker.addListener('click', function() {
        clickMarkerEvent();
    });
}

//listener
function clickMarkerEvent() {
    lastMarkerClicked = event.target || event.srcElement;
    alert(markersArray[lastMarkerClicked].title);
}

最后一种方法（即使有效）的问题如下：

• 我正在访问HTML元素，而不是JavaScript元素本身
• 我被迫使用HTML的

  title

  属性来跟踪索引，这只能在标记的标题是索引（不能是任何其他内容）的情况下完成
• 除非执行类似于

  markersArray[lastMarkerClicked.title]

  的操作，否则无法使用此处描述的方法（）

总的来说，我的解决方案是可行的，但我真的不喜欢它。有更好的方法吗

以下是我的代码，我愿意接受建议

“严格使用”
/*
最佳实践：为了获得最佳的用户体验，只需要一个信息窗口
随时在地图上打开。多个信息窗口使地图显示
凌乱的。如果一次只需要一个信息窗口，您可以创建
一个InfoWindow对象，并在地图上的不同位置或标记处打开它
事件，例如用户单击。如果您确实需要多个信息窗口，您可以
可以同时显示多个InfoWindow对象。
*/
var信息窗口；
var-contentString；
var lastMarkerClicked；
var-markersArray=[]；
var映射；
//使用标记初始化映射
函数initMap（）{
var mylatng={
lat:-25.363，
液化天然气：131.044
};
map=new google.maps.map（document.getElementById（'map'）{
缩放：4，
中心：myLatLng
});
//单击映射时，此事件侦听器调用addMarker（）。
google.maps.event.addListener（映射，'click'，函数（事件）{
添加标记（事件标记）；
});
添加标记（myLatLng）；
}
//将标记添加到地图并推送到阵列。
功能添加标记（位置）{
var marker=new google.maps.marker({
位置:位置,，
地图：地图，
真的，
动画：google.maps.animation.DROP，
标签：markersArray.length+“”，
标题：markersArray.length+“”
});
markersArray.push（marker）；
marker.addListener（'click'，function（））{
单击标记事件（）；
});
}
//在阵列中的所有标记上设置贴图。
函数setMapOnAll（映射）{
对于（var i=0；i'+
'Title:'+lastMarkerClicked.Title+'
'+
“隐藏标记”+
“删除标记”+
'' +
'';
if（infowindow！==null&&typeof infowindow！==undefined）
infowindow.close（）；
infowindow=新建google.maps.infowindow({
content:contentString，
最大宽度：200
});
open（map，markersArray[lastMarkerClicked.title]）；
}
函数deleteMarkerClickEvent（）{
deleteMarker（lastMarkerClicked.title）；
}
函数HIDEMARKERCICKEVENT（）{
hideMarker（lastMarkerClicked.title）；
}

html，
身体{
身高：100%；
保证金：0；
填充：0；
}
#地图{
身高：100%；
}

简单标记

您的第一种方法几乎没有问题，问题是在调用click listener时，所有标记都已在

markersArray

中，因此

markersArray.length-1

始终指向最后一个标记。只需创建一个变量，该变量的值将标记的id保存在

addMarker

函数的范围内。下面是工作代码（注意使用var

index=markersArray.length；

）：

“严格使用”
var信息窗口；
var-contentString；
var-markersArray=[]；
var映射；
//使用标记初始化映射
函数initMap（）{
var mylatng={
lat:-25.363，
液化天然气：131.044
};
map=new google.maps.map（document.getElementById（'map'）{
缩放：4，
中心：myLatLng
});
//单击映射时，此事件侦听器调用addMarker（）。
google.maps.event.addListener（映射，'click'，函数（事件）{
添加标记（事件标记）；
});
添加标记（myLatLng）；
}
//将标记添加到地图并推送到阵列。
功能添加标记（位置）{
var index=markersArray.length；
var marker=新谷歌
(function() {
    console.log(1); 
    setTimeout(function(){console.log(2)}, 1000); 
    setTimeout(function(){console.log(3)}, 0); 
    console.log(4);
})();

var markersArray = [];

// Adds a marker to the map and push to the array.
function addMarker(location) {
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        draggable: true,
        animation: google.maps.Animation.DROP,
        label: markersArray.length + "",
        title: "Marker Number " + markersArray.length
    });

    markersArray.push(marker);
    marker.addListener('click', (function(index) {
        return function() {
            clickMarkerEvent(index);
        };
    })(markersArray.length - 1));
}

//listeners
function clickMarkerEvent(index) {
    alert(index);
}