使用谷歌地图点击活动和非活动标记

Question

如何在点击时实现自定义活动状态,当未激活时,它默认返回到原始自定义标记.我尝试了各种尝试,但这是我得到的最接近的.有没有人解决过这个问题？

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

Answer 1

单击标记后,将所有标记设置回默认图标后,将图标设置为活动状态.一个选项(假设引用所有标记在数组中可用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));

概念证明小提琴

代码段:

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"></script>
<div id="mack-map"></div>