如何判斷當前是否選擇了Google地圖標記？

Question

我在Google Maps V3上有足夠簡單的地圖。

我將鼠標上的圖標圖像更改爲偵聽器事件，我將其更改回鼠標上，使其足夠簡單。

當我點擊標記時，我再次更改圖標，但是，我想在選擇標記時保留該圖標。當我將鼠標移出時，標記圖標會再次發生變化，因爲我告訴它在鼠標移出偵聽器事件中這樣做。

我需要從mouseout偵聽器事件中排除選定的標記，但我無法弄清楚如何找到我當前選擇的標記。有任何想法嗎？

這裏是我的代碼

 google.maps.event.addListener(marker, 'mouseover', function() { 
      this.setIcon("images/star-3-white.png"); 

     }); 
     google.maps.event.addListener(marker, 'mouseout', function() { 
       // this overwrites the image again, 
       // need to exclude the current one here 
       this.setIcon("images/star-3.png"); 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
      this.setIcon("images/star-3-white.png"); 
      infowindow.setContent(this.html); 
      infowindow.open(map, this); 
     }); 

Answer 1

有點長囉嗦，但我只是增加了一個變量來存儲當前的標記標題，我知道它是獨一無二的。然後我檢查一下是否是我選擇的那個。此外，我確保重置所有標記，使其不會與所選標記保持相同的顏色：

var clickedMarkerTitle = null; 
    function addMarker(latLng, _title, contentString) { 
     marker = new google.maps.Marker({ 
      map: map, 
      position: latLng, 
      icon: "images/star-3.png", 
      title: _title, 
      html: contentString 
     }); 

     google.maps.event.addListener(marker, 'mouseover', function() { 
      this.setIcon("images/star-3-white.png"); 

     }); 
     google.maps.event.addListener(marker, 'mouseout', function() { 
      //this.setIcon("images/star-3.png"); 
      testIcon(this); 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
      resetMarkerIcons(); 
      saveIconState(this); 
      this.setIcon("images/star-3-white.png"); 
      infowindow.setContent(this.html); 
      infowindow.open(map, this); 

     }); 

     markersArray.push(marker); 

    } 
    function resetMarkerIcons() { 
     // reset all the icons back to normal except the one you clicked 
     for (var i = 0; i < markersArray.length; i++) { 
      markersArray[i].setIcon("images/star-3.png"); 

     } 

    } 
    function saveIconState(marker) { 
     clickedMarkerTitle = marker.title; 
    } 
    function testIcon(marker) { 
     $('#test').html('<span>' + marker.title + '</span>'); 

     if (clickedMarkerTitle != null) { 
      $('#test').html('<span>' + marker.title + ' and its not null</span>'); 
      if (marker.title != clickedMarkerTitle) { 
       $('#test').html('<span>' + marker.title + ' and ' + clickedMarkerTitle + '</span>'); 
       marker.setIcon("images/star-3.png"); 
      } 
     } 
     else { 
      marker.setIcon("images/star-3.png"); 
     } 
    } 

Answer 2

要麼

1. 創建.selected和設置，當你點擊它，然後對其進行測試在鼠標移開功能標記的成員（以及鼠標懸停函數如果你想完成），如果它被設置，不要改變圖標。
2. 創建一個全局變量（假設一次只選擇一個標記），將其設置爲等於被點擊的標記。在鼠標懸停（和鼠標懸停）檢查它是否等於當前標記（this），如果它不改變圖標。

Answer 3

在搜索其他內容時遇到此答案。這會做。

var currentMarker = null; 
var markerIcon = 'some.svg'; 
var markerIconHover = 'some-other.svg'; 

// Initialize marker here 
[...] 

// Set current marker on click 
google.maps.event.addListener(marker, 'click', function() { 
    // Reset market icons 
    clearMarkerIcons(); 
    // Set hovered map marker 
    marker.setIcon(markerIconHover); 
    // Set current marker 
    currentMarker = marker; 
    // Open infoWindow here 
    [...] 
}); 

// Set correct icon on mouseover 
google.maps.event.addListener(marker, 'mouseover', function() { 
    marker.setIcon(markerIconHover); 
}); 

// Set correct icon on mouseout 
google.maps.event.addListener(marker, 'mouseout', function() { 
    if (currentMarker !== marker) { 
     marker.setIcon(markerIcon); 
    } 
}); 

// Clear all set marker icons 
function clearMarkerIcons() { 
    for (var i = 0; i < map.markers.length; i++) { 
     map.markers[i].setIcon(markerIcon); 
    } 
}