infoWindow 关闭后将图标更改回默认状态 Google 地图

Question

所以我的目标是使图标在单击按钮时从“normalIcon”状态变为“activeIcon”状态，目前确实如此。它也会在单击图钉时打开一个信息窗口。当信息窗口关闭时，我希望图标回到“normalIcon”状态。现在，如果您单击其他位置，它会将图标更改回“normalIcon”，但您单击的是另一个图标，现在是“activeIcon”

这是 javascript 我有：

var normalIcon = 'Pin.png';
var activeIcon = 'Selected.png';
var locations = [
  ['<div class="header">Vigor XF in Outer Richmond</div><p id="address">4046 Balboa St, San Francisco,</p><p id="address-2">CA 94121, USA</p><div id="hours">MON - THU  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;      05:30–20:00</div><div id="hours">FRI        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    05:30–18:00<div><div id="hours">SAT     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  07:00–14:30</div><div id="hours">SUN    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        10:00–13:00</div><div class="row"><div class="column" id="dialog"><img src="1.png" class="image"></div><div class="column"><img src="2.png"></div><div class="column"><img src="3.png"></div><div class="column"><img src="4.png"></div></div>', 37.78, -122.49, 5],
  ['<div class="header">Lower</div><img id="myImg" src="https://www.geocodezip.net/images/snow.png" alt="Snow" style="width:100%;max-width:300px">', 37.77, -122.43, 4],
];

function initMap() {
  var map= new google.maps.Map(
    document.getElementById('map'), {
      zoom: 14,
      center: { lat:37.78, lng:-122.44 }
    });

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

  var marker, i;

  var markers = new Array();

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

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

我试过像这样使用infowindow.close

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

但这会完全禁用它。我觉得我很接近但不完全在那里。有人有快速修复方法吗？

Answer 1

如果你想在InfoWindow is closed, add a listener to the InfoWindow for the closeclick事件时改变图标：

closeclick
function()
Arguments: None
This event is fired when the close button was clicked.

google.maps.event.addListenerOnce(infowindow, 'closeclick', function() {
  marker.setIcon(normalIcon);
})

proof of concept fiddle

代码片段：

var normalIcon = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
var activeIcon = 'http://maps.google.com/mapfiles/ms/micons/yellow.png';
var locations = [
  ['<div class="header">Vigor XF in Outer Richmond</div><p id="address">4046 Balboa St, San Francisco,</p><p id="address-2">CA 94121, USA</p><div id="hours">MON - THU  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;      05:30–20:00</div><div id="hours">FRI        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    05:30–18:00<div><div id="hours">SAT     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  07:00–14:30</div><div id="hours">SUN    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        10:00–13:00</div><div class="row"><div class="column" id="dialog"><img src="1.png" class="image"></div><div class="column"><img src="2.png"></div><div class="column"><img src="3.png"></div><div class="column"><img src="4.png"></div></div>', 37.78, -122.49, 5],
  ['<div class="header">Lower</div><img id="myImg" src="https://www.geocodezip.net/images/snow.png" alt="Snow" style="width:100%;max-width:300px">', 37.77, -122.43, 4],
];

function initMap() {
  var map = new google.maps.Map(
    document.getElementById('map'), {
      zoom: 12,
      center: {
        lat: 37.78,
        lng: -122.44
      }
    });

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

  var marker, i;

  var markers = new Array();

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

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

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>

infoWindow 关闭后将图标更改回默认状态 Google 地图

Change icon back to default state after infoWindow closed Google Maps

javascript

google-maps

google-maps-api-3