Javascript 如何将同一事件侦听器添加到多个标记中，然后在Google Maps API v3中区分侦听器中的标记？

我的Javascript中有许多标记的相同事件侦听器。如何区分此侦听器中的不同标记？我想在单击某个特定标记时在别处显示另一个标记。每个标记都有另一个标记，我单击它时会显示它

事件侦听器代码：

google.maps.event.addListener(marker, 'click', function() {
//code goes here

});

更多详情：

---

我有两个数组

markers1

和

markers2

，每个数组都有10个标记。我在地图上显示了10个来自

标记1

。单击

markers1[0]

marker，我想在地图上显示

markers2[0]

标记。如何在事件侦听器中知道我已单击了

markers1[0]

，现在我知道我可以使用

THIS

来识别

markers1[0]

但是我如何在侦听器中知道它是数组

markers1

中位置0处的标记，以便我也可以在数组

markers2

中位置0处显示标记？

您的意思是

marker

变量是一个标记数组吗？或者，您的意思是，每个标记的代码都是重复的？因为如果是后一种情况，那么在每次调用addListener时，

这个

指的是有问题的标记

评论后更新

好的，那么您可以使用一个只在

标记1

中循环的函数：

function setVisible(marker) {
    for(var i=0; i<markers1.length; i++) {
        if(marker==markers1[i]) {
            markers2[i].setVisible(true);
        } else {
            markers2[i].setVisible(false);
        }
    }
}   

但是，您不希望这样做10次，因此您需要将其放在如下模式中：

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

for(var i=0; i<marker1Data.length; i++) {
    marker = new google.maps.Marker({
        map: theMap,
        position: marker1Data[i].latLng,
        visible: true
    })

    marker1.push(marker);

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

---

for（var i=0；i您的意思是
marker
变量是一个标记数组吗？还是您的意思是每个标记的代码都是重复的？因为如果是后者，那么在每次调用addListener时，
这个
指的是有问题的标记

评论后更新

好的，那么您可以使用一个只在
标记1
中循环的函数：

function setVisible(marker) {
    for(var i=0; i<markers1.length; i++) {
        if(marker==markers1[i]) {
            markers2[i].setVisible(true);
        } else {
            markers2[i].setVisible(false);
        }
    }
}   

但是，您不希望这样做10次，因此您需要将其放在如下模式中：

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

for(var i=0; i<marker1Data.length; i++) {
    marker = new google.maps.Marker({
        map: theMap,
        position: marker1Data[i].latLng,
        visible: true
    })

    marker1.push(marker);

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

for（var i=0；i您可以做的是使用一个外部函数来处理标记/信息窗口的添加（参见150PoundsOfDonamite的评论）。巧合的是，我今天写了一篇文章，展示了如何做到这一点

<script type="text/javascript">
function initialize() {
    var i;
    var arrDestinations = [
        {
            lat: 50.815155,
            lon: -0.137072,
            title: "Brighton Pier",
            description: "Brighton Palace Pier dates to 1899"
        },
        {
            lat: 50.822638,
            lon: -0.137361,
            title: "Brighton Pavilion",
            description: "The Pavilion was built for the Prince of Wales in 1787"
        },
        {
            lat: 50.821226,
            lon: -0.139372,
            title: "English's",
            description: "English's Seafood Restaurant and Oyster Bar"
        }
    ];

    var myOptions = {
        zoom: 15,
        center: new google.maps.LatLng(50.820645,-0.137376),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var infowindow =  new google.maps.InfoWindow({
        content: ''
    });

    // loop over our array
    for (i = 0; i < arrDestinations.length; i++) {
        // create a marker
        var marker = new google.maps.Marker({
            title: arrDestinations[i].title,
            position: new google.maps.LatLng(arrDestinations[i].lat, arrDestinations[i].lon),
            map: map
        });

        // add an event listener for this marker
        bindInfoWindow(marker, map, infowindow, "<p>" + arrDestinations[i].description + "</p>");
    }
}

function bindInfoWindow(marker, map, infowindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(html);
        infowindow.open(map, marker);
    });
} 

google.maps.event.addDomListener(window, 'load', initialize);
</script>


函数初始化（）{
var i；
var ARR目的地=[
{
拉脱维亚：50.815155，
lon：-0.137072，
标题：“布莱顿码头”，
描述：“布莱顿宫殿码头建于1899年”
},
{
拉脱维亚：50.822638，
lon：-0.137361，
标题：“布莱顿馆”，
描述：“展馆于1787年为威尔士亲王建造”
},
{
拉脱维亚：50.821226，
lon：-0.139372，
标题：“英语的”，
描述：“英式海鲜餐厅和牡蛎酒吧”
}
];
变量myOptions={
缩放：15，
中心：新google.maps.LatLng（50.820645，-0.137376），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var infowindow=new google.maps.infowindow({
内容：“”
});
//在我们的阵列上循环
对于（i=0；i<0.length；i++）{
//创建一个标记
var marker=new google.maps.marker({
标题：A[i]。标题，
位置：新建google.maps.LatLng（arrDestinations[i].lat，arrDestinations[i].lon），
地图：地图
});
//为此标记添加事件侦听器
bindInfoWindow（标记、地图、infowindow，“”+arrDestinations[i].说明+”
”；
}
}
函数bindInfoWindow（标记、地图、infowindow、html）{
google.maps.event.addListener（标记'click'，函数（）{
setContent（html）；
信息窗口。打开（地图、标记）；
});
} 
google.maps.event.addDomListener（窗口“加载”，初始化）；
您可以使用一个外部函数来处理标记/信息窗口的添加（参见150PoundsOfDonamite的评论）。巧合的是，我今天写了一篇文章，展示了如何做到这一点

<script type="text/javascript">
function initialize() {
    var i;
    var arrDestinations = [
        {
            lat: 50.815155,
            lon: -0.137072,
            title: "Brighton Pier",
            description: "Brighton Palace Pier dates to 1899"
        },
        {
            lat: 50.822638,
            lon: -0.137361,
            title: "Brighton Pavilion",
            description: "The Pavilion was built for the Prince of Wales in 1787"
        },
        {
            lat: 50.821226,
            lon: -0.139372,
            title: "English's",
            description: "English's Seafood Restaurant and Oyster Bar"
        }
    ];

    var myOptions = {
        zoom: 15,
        center: new google.maps.LatLng(50.820645,-0.137376),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var infowindow =  new google.maps.InfoWindow({
        content: ''
    });

    // loop over our array
    for (i = 0; i < arrDestinations.length; i++) {
        // create a marker
        var marker = new google.maps.Marker({
            title: arrDestinations[i].title,
            position: new google.maps.LatLng(arrDestinations[i].lat, arrDestinations[i].lon),
            map: map
        });

        // add an event listener for this marker
        bindInfoWindow(marker, map, infowindow, "<p>" + arrDestinations[i].description + "</p>");
    }
}

function bindInfoWindow(marker, map, infowindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(html);
        infowindow.open(map, marker);
    });
} 

google.maps.event.addDomListener(window, 'load', initialize);
</script>


函数初始化（）{
var i；
var ARR目的地=[
{
拉脱维亚：50.815155，
lon：-0.137072，
标题：“布莱顿码头”，
描述：“布莱顿宫殿码头建于1899年”
},
{
拉脱维亚：50.822638，
lon：-0.137361，
标题：“布莱顿馆”，
描述：“展馆于1787年为威尔士亲王建造”
},
{
拉脱维亚：50.821226，
lon：-0.139372，
标题：“英语的”，
描述：“英式海鲜餐厅和牡蛎酒吧”
}
];
变量myOptions={
缩放：15，
中心：新google.maps.LatLng（50.820645，-0.137376），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var infowindow=new google.maps.infowindow({
内容：“”
});
//在我们的阵列上循环
对于（i=0；i<0.length；i++）{
//创建一个标记
var marker=new google.maps.marker({
标题：A[i]。标题，
位置：新建google.maps.LatLng（arrDestinations[i].lat，arrDestinations[i].lon），
地图：地图
});
//为此标记添加事件侦听器
bindInfoWindow（标记、地图、infowindow，“”+arrDestinations[i].说明+”
”；
}
}
函数bindInfoWindow（标记、地图、infowindow、html）{
google.maps.event.addListener（标记'click'，函数（）{
setContent（html）；
信息窗口。打开（地图、标记）；
});
} 
google.maps.event.addDomListener（窗口“加载”，初始化）；
你的功能
var myMarkerClickHandler = function() {
    // use the keyword 'this' to access the marker that got clicked
    console.debug('Marker for ' + this.arrDestination.title + ' got clicked!');
    console.debug('Its position is ' + this.position);
}

for (i = 0; i < arrDestinations.length; i++) {
    // create a marker
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(arrDestinations[i].lat, arrDestinations[i].lon),
        // as @john-black says, you can add whatever properties you like to the marker
        arrDestination: arrDestinations[i]
    });

    // add *the* event handler to this marker
    google.maps.event.addListener(marker, 'click', myMarkerClickHandler);
}