0

我的地图上有几个标记（在一个数组中），每个标记都有我给它们的自定义 ID 标签。

我想要什么：当我点击一个标记时，我希望将它的 ID 添加到另一个数组中。

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

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

感谢所有帮助

4

2 回答 2

2

这真的很容易，这要归功于 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

于 2013-03-26T21:39:39.847 回答
0

这应该会有所帮助。我向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);
}

这是一个实际的例子。

于 2013-03-26T21:40:21.223 回答