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

Question

我的Javascript中有许多标记具有相同的事件监听器。如何区分此侦听器中的不同标记？我想在单击特定标记时在其他位置显示另一个标记。每个标记都有另一个标记，单击该标记即可显示。

事件侦听器代码：

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

});

更多详细信息：

我有两个数组markers1和markers2，每个数组都有10个标记。我在地图上显示了markers1中的10。单击markers1[0]标记后，我想在地图上显示markers2[0]标记。我如何知道在事件监听器中单击了markers1[0]，现在我知道可以使用THIS来标识markers1[0]，但是如何在监听器中知道它是位置0上的标记在数组markers1中，以便我也可以在数组markers2中的位置0处显示标记？

Answer 1

您可以轻松地将索引（或任何其他信息）添加到每个标记：

for( var i = 0; i < arrDestinations; i += 1 ) {
    var marker = new google.maps.Marker({
        title: arrDestinations[i].title,
        position: new google.maps.LatLng(arrDestinations[i].lat, arrDestinations[i].lon),
        map: map,
        myIndex: i    // ADDED FIELD: Each marker contains its index
    )};
    bindInfoWindow(marker,map,infowindow,"<p>arrDestinations[i].description + "</p>");
}

然后您可以在事件处理程序中执行此操作：

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

setVisibility函数类似于上面的150PoundsOfDonamite所建议的函数，除了您知道要使其可见的标记的索引：

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

Answer 2

您实际上对于每个标记没有相同的侦听器，或者至少没有相同的处理函数；您只需输入相同的代码即可。

在JavaScript中，函数是一流的对象，到目前为止，在所有已发布的答案中，都会为每个标记创建一个单独的函数。这是浪费内存。

这是我想您想要的：

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);
}

Answer 3

您可以做的是拥有一个处理标记/信息窗口添加的外部函数（请参阅150PoundsOfDonamite的注释）。巧合的是，我今天写了blog post来显示如何执行此操作。

<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>

Answer 4

function yourlistener(usedMarker)
{
    // in the var usedMarker you have the reference to the single marker
}

for(var x=0;x<markers.length;x++)
(function(marker){

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

)(markers[x]);

这样的东西？希望对您有所帮助

Answer 5

您是说marker变量是标记数组吗？还是说您为每个标记重复了您拥有的代码？因为如果是后者，则在每次对addListener的调用中，this都指向所涉及的标记。

评论后更新

好，那么您可以使用一个仅循环通过marker1的函数：

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

然后每个单独的点击侦听器定义将如下所示：

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

但是，您不想做10次这样的事情，因此您需要将其放在这样的模式中：

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));
}

marker1Data只是LatLng对象的数组，这些对象定义了marker1中每个标记的位置。当然还有marker2的for循环，但带有visible: false。