gpt4 book ai didi

javascript - 如何将事件监听器添加到 map 标记[]数组

转载 作者:行者123 更新时间:2023-12-03 03:58:29 26 4
gpt4 key购买 nike

我有一个谷歌地图实现,它使用几个函数调用和一个标记[]数组将图钉放在 map 上。

它工作得很好,但我不知道如何向该函数添加 onClick 事件或其他类型的事件监听器,因为它没有显式定义的标记变量。

我在哪里可以添加这样的东西?:

google.maps.event.addListener(markers, 'click', function() {
window.location.href = this.url;};

这是我的基本 map 代码和功能:

var pinlocations = [
['1', {lat: 30.266758, lng: -97.739080}, 12, '/establishments/1111'],
['2', {lat: 30.267178, lng: -97.739050}, 11, '/establishments/1222'],
['3', {lat: 30.267458, lng: -97.741231}, 10, '/establishments/1333'],
['4', {lat: 30.388880, lng: -97.892276}, 9, '/establishments/1444']
];

var markers = [];
var map;

function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 30.267178, lng: -97.739050}
});

}

function drop() {
clearMarkers();
for (var i = 0; i < pinlocations.length; i++) {
var place = pinlocations[i];
addMarkerWithTimeout(place[1], place[0], place[2], place[3], i * 200);
}
}

function addMarkerWithTimeout(position, title, zindex, url, timeout) {
window.setTimeout(function() {
markers.push(new google.maps.Marker({
position: position,
map: map,
title: title,
zIndex: zindex,
url: url,
animation: google.maps.Animation.DROP
}));
}, timeout);
}

最佳答案

您不必将事件添加到数组中,而是必须将其添加到数组中的每个元素中。您可以使用 .forEach() 数组方法来执行此操作:

// Iterate the markers array
markers.forEach(function(marker){
// Set up a click event listener for each marker in the array
marker.addListener('click', function() {
window.location.href = marker.url;
});
});

或者,您可以采取另一种方法,在创建每个单独标记时添加事件。

  function addMarkerWithTimeout(position, title, zindex, url, timeout) {
window.setTimeout(function() {
markers.push(new google.maps.Marker({
position: position,
map: map,
title: title,
zIndex: zindex,
url: url,
animation: google.maps.Animation.DROP
}).addListener('click', function() {
window.location.href = this.url;
});
}, timeout);
}

关于javascript - 如何将事件监听器添加到 map 标记[]数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44833803/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com