javascript - 从监听器访问标记 - Google map javascript API3.0

Question

我的 map 上有几个标记(以数组形式)，每个标记都有我给它们的自定义 ID 标签。

我想要什么:当我单击一个标记时，我希望将其 ID 添加到另一个数组。

问题:Google 的鼠标事件没有目标属性，只有位置，所以我似乎无法直接访问 ID。

我真的不想诉诸于使用该位置来查找最接近它的标记并以这种方式返回它的 ID，这相当复杂。

感谢所有帮助

Answer 1

这真的很容易，这要归功于 JavaScript 和许多其他语言中称为闭包的功能。

只需将创建标记并设置其事件监听器的代码放入函数内，然后使用该特定标记所需的数据为每个标记调用该函数。例如:

var places = [
    {
        id: 'one', lat: 1, lng: -1, name: 'First'
    },
    {
        id: 'two', lat: 2, lng: -2, name: 'Second'
    }
];

for( var i = 0;  i < places.length;  i++ ) {
    addPlace( places[i] );
}

function addPlace( place ) {
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng( place.lat, place.lng ),
        title: place.name
    });
    google.maps.event.addListener( 'click', function() {
        alert( 'Clicked ' + place.id + ': ' + place.name );
    });
}

我没有测试此 Maps API 代码，但代码的细节并不重要。重要的是要理解代码中使用的 place 变量。这是关键部分:该变量可以在事件监听器内部访问，因为事件监听器嵌套在以 place 作为参数的 addPlace() 函数中。

请注意该代码与此类代码之间的区别，此类代码无法工作:

for( var i = 0;  i < places.length;  i++ ) {
    var place = places[i];
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng( place.lat, place.lng ),
        title: place.name
    });
    google.maps.event.addListener( 'click', function() {
        alert( 'Clicked ' + place.id + ': ' + place.name );
    });
}

两者之间的唯一区别是工作版本将循环体放在一个单独的函数中，该函数从循环中调用，而不是将所有代码直接放在循环内。在每次调用的函数中包含该代码就是创建闭包的原因，这就是让内部事件监听器函数“查看”外部函数中的变量的原因。

闭包的伟大之处在于您可以在任何类似情况下使用它们。它并不特定于 Maps API 或 API 使用的对象。您甚至可能已经使用过它们但没有意识到，例如在像这样的 setTimeout() 调用中:

// Display an alert 'time' milliseconds after this function is called
function slowAlert( message, time ) {
    setTimeout( function() {
        alert( message );
    }, time );
}

slowAlert( 'Howdy!', 1000 );  // Wait a second and then say Howdy!

在 setTimeout() 回调函数内部进行 alert() 调用时，它使用 slowAlert() 上的闭包> 函数来获取传递到该函数的 message 变量的值。