Question

我的地图上有几个标记（在数组中），每个标记都有一个我给它的自定义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变量。这是关键部分：该变量可在事件侦听器中访问，只是因为事件侦听器嵌套在addPlace()函数中，该函数以place作为参数。

请注意该代码与此类代码之间的差异，不的工作原理：

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!

在alert()回调函数内部进行setTimeout()调用的情况下，它使用slowAlert()函数上的闭包来获取message变量的值那是传递给那个函数的。

Answer 2

这应该有所帮助。我在标记对象中添加了customId属性，然后在标记click事件中将id属性分配给新数组。

function initialize() {
    var map;
    var centerPosition = new google.maps.LatLng(38.713107, -90.42984);
    var options = {
        zoom: 6,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var bounds = new google.maps.LatLngBounds();
    map = new google.maps.Map($('#map')[0], options);
    var infoWindow = new google.maps.InfoWindow();
    //marker array
    var markers = [];
    //sencondary array to store markers that were clicked on.
    var markerIdArray = [];

    for (i = 0; i < 6; i++) {
        var lat = 38.713107 + Math.random();
        var lng = -90.42984 + Math.random();
        var marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(lat, lng),
            customId: i //add a custom id to the marker
        });
        bounds.extend(marker.position);

        google.maps.event.addListener(marker, 'click', function () {
            //add the id to the other array.
            markerIdArray.push(this.customId);
            //log the content of the array to the console.
            console.log(markerIdArray); 
        });
        markers.push(marker);
    }    
    map.fitBounds(bounds);
}

这是example of this in action.

从听众访问标记 - 谷歌地图javascript API3.0

2 个答案: