Active and not active marker on click using google maps

问题

How would I achieve having a custom active state on click and when not active it defaults back to the original custom marker. I've tried various attempts but this is the closest I've gotten it. Has anyone solved this before?

jQuery(function($) {

    var is_internetExplorer11 = navigator.userAgent.toLowerCase().indexOf('trident') > -1;
    var marker_url = (is_internetExplorer11) ? 'map_marker_highlight.png' : 'map_marker_highlight.png';
    var activeIcon = {
        url: 'map_marker.png',
        // This marker is 20 pixels wide by 32 pixels tall.
        //size: new google.maps.Size(32, 32),
        // The origin for this image is 0,0.
        //origin: new google.maps.Point(130.3065885, -193.6986437),
        // The anchor for this image is the base of the flagpole at 0,32.
        anchor: new google.maps.Point(16, 40)
    };

    var locations = [
        ['<b>Name</b><br>Address<br>state<br>', 34.845244, -80.371634, 4],
        ['<b>Name</b><br>Address<br>state<br>', 34.845244, -80.371634, 4],
    ];

    var mapOptions = {
        center: new google.maps.LatLng(138.3065885, -193.6986437),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        zoomControl: true,
        scrollwheel: false,
        styles: styles
    };
    map = new google.maps.Map(document.getElementById("mack-map"), mapOptions);

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: marker_url,
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                //console.log(activeIcon);
                infowindow.setContent(locations[i][0]);
                if (infowindow) {
                    this.setIcon(activeIcon)
                } else {
                    this.setIcon(marker_url)
                }
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
});

回答1:

When the marker is clicked, set the icon to active, after setting all the markers back to their default icon. One option (assumes references to all markers are available in an array markers):

google.maps.event.addListener(marker, 'click', (function(marker, i) {
  return function() {
    for (var j = 0; j < markers.length; j++) {
      markers[j].setIcon(normalIcon);
    }
    infowindow.setContent(locations[i][0]);
    this.setIcon(activeIcon)
    infowindow.open(map, marker);
  }
})(marker, i));

proof of concept fiddle

code snippet:

jQuery(function($) {
  var markers = [];
  var activeIcon = {
    url: 'http://maps.google.com/mapfiles/ms/micons/yellow.png'
  };
  var normalIcon = {
    url: "http://maps.google.com/mapfiles/ms/micons/blue.png"
  };
  var locations = [
    ['<b>Name</b><br>Address<br>state<br>', 34.845244, -80.371634, 4],
    ['<b>Name</b><br>Address<br>state<br>', 34.84, -80.375, 4],
    ['<b>Name</b><br>Address<br>state<br>', 34.86, -80.38, 4]
  ];
  var mapOptions = {
    center: new google.maps.LatLng(34.85, -80.371634),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    zoomControl: true,
    scrollwheel: false
  };
  map = new google.maps.Map(document.getElementById("mack-map"), mapOptions);
  var infowindow = new google.maps.InfoWindow();
  var marker, i;
  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: "http://maps.google.com/mapfiles/ms/micons/blue.png",
    });
    markers.push(marker);
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        for (var j = 0; j < markers.length; j++) {
          markers[j].setIcon(normalIcon);
        }
        infowindow.setContent(locations[i][0]);
        this.setIcon(activeIcon)
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
});

html,
body,
#mack-map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="mack-map"></div>

来源：https://stackoverflow.com/questions/35165484/active-and-not-active-marker-on-click-using-google-maps