如何判断当前是否选择了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); 
    } 
}