Google Maps API v3，单击时如何更改标记图标

Question

How can I change a marker icon when a marker is clicked (on a click event) and return it back to a normal icon when another marker is clicked?

Answer 1

Just in any case anyone wants to see an example of keeping track of the previous marker in a global variable like Kasper mentioned, here is what I did:

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

        if (selectedMarker) {
            selectedMarker.setIcon(normalIcon);
        }
        marker.setIcon(selectedIcon);
        selectedMarker = marker;
    });

(after setting selectedMarker as a global variable)

Answer 2

I haven't tested this code, so there may be a typos or bugs, but it should give you the idea.

First, define a callback to set all markers to the normal icon (to reset any previously clicked markers) and set the current clicked marker's icon to the selected icon:

var markerCallback = function() {
    for (var i=0; i<arrayOfMarkers.length; i++) {
        arrayOfMarkers[i].setIcon(normalIcon);
    }
    this.setIcon(selectedIcon);
 }

Then, assign the callback to the click event on each marker like so:

google.maps.event.addListener(marker, 'click', markerCallback); 

There are certainly some code improvements that could be made. For example, you might not want normalIcon , selectedIcon , and arrayOfMarkers to be global variables the way the code above assumes they are. And if you have a lot of markers, you probably want to instead keep track of the previously selected marker rather than having a for loop reset the icon on every one of them.

But like I said, this should give you the idea.