如何向多個標記添加相同的事件偵聽器，然后區分 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使得我也可以在陣列位置0顯示標記markers2 ？

Answer 1

對於每個標記，您實際上沒有相同的偵聽器，或者至少沒有相同的處理程序函數； 你只是有相同的代碼。

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

您可以輕松地將索引（或任何其他信息）添加到每個標記：

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 3

你的意思是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僅僅是定義每個標記的位置經緯度對象數組marker1 。 當然還有一個 for 循環marker2 ，但visible: false 。

Answer 4

您可以做的是擁有一個外部函數來處理標記/信息窗口的添加（請參閱 150PoundsOfDonamite 的評論）。 巧合的是，我今天寫了一篇博客文章，展示了如何做到這一點。

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

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

像這樣的東西？ 希望這可以幫助