单击其他时更改谷歌地图标记图标

Question

我创建了一个谷歌地图多个位置页面， 使用高级自定义字段 Google Map 字段。

我已设法在单击时更改标记图标，但我希望在单击其他图标时将其更改回来。

下面是代码示例：

    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: iconBase + 'Stock%20Index%20Up.png'
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0], locations[i][6]);
      infowindow.open(map, marker);
      marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
    }
  })(marker, i));

更好地查看此处的工作代码： http://jsfiddle.net/gargiguy/s8vgxp3g

Answer 1

邓肯说：您要做的是将所有标记添加到数组中。在您的单击事件处理程序中，循环遍历该数组，更新每个标记的图标。然后最后为被点击的标记设置图标。

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("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Up.png");
    }
    marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
};

working fiddle

工作代码sn-p：

var markers = [];
var map;

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    // center: new google.maps.LatLng(-33.92, 151.25),
    center: new google.maps.LatLng(36.8857, -76.2599),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow();
  var iconBase = 'https://cdn3.iconfinder.com/data/icons/musthave/24/';
  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: iconBase + 'Stock%20Index%20Up.png'
    });

    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("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Up.png");
        }
        marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
      };
    })(marker, i));
    markers.push(marker);

  }
}
google.maps.event.addDomListener(window, 'load', initialize);
var locations = [
  [
    "New Mermaid",
    36.9079, -76.199,
    1,
    "Georgia Mason",
    "",
    "Norfolk Botanical Gardens, 6700 Azalea Garden Rd.",
    "coming soon"
  ],
  [
    "1950 Fish Dish",
    36.87224, -76.29518,
    2,
    "Terry Cox-Joseph",
    "Rowena's",
    "758 W. 22nd Street in front of Rowena's",
    "found"
  ],
  [
    "A Rising Community",
    36.95298, -76.25158,
    3,
    "Steven F. Morris",
    "Judy Boone Realty",
    "Norfolk City Library - Pretlow Branch, 9640 Granby St.",
    "found"
  ],
  [
    "A School Of Fish",
    36.88909, -76.26055,
    4,
    "Steven F. Morris",
    "Sandfiddler Pawn Shop",
    "5429 Tidewater Dr.",
    "found"
  ],
  [
    "Aubrica the Mermaid (nee: Aubry Alexis)",
    36.8618, -76.203,
    5,
    "Myke Irving/ Georgia Mason",
    "USAVE Auto Rental",
    "Virginia Auto Rental on Virginia Beach Blvd",
    "found"
  ]
];

<script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div>
  <div id="map" style="width: 500px; height: 400px;"></div>
</div>

Answer 2

由于听起来您只需将以前的图标改回原来的图标，因此我不建议循环遍历每个标记。在有很多标记的地图中，这可能会变得很重。

相反，我会将活动标记存储在点击事件的变量中，并在它发生变化时更新它。

var marker;
var activeMarker;
var iconDefault = iconBase + 'Stock%20Index%20Up.png';
var iconSelected = 'https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png';

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

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0], locations[i][6]);
      infowindow.open(map, marker);

      // check to see if activeMarker is set
      // if so, set the icon back to the default
      activeMarker && activeMarker.setIcon(iconDefault);

      // set the icon for the clicked marker
      marker.setIcon(iconSelected);

      // update the value of activeMarker
      activeMarker = marker;
    }
  })(marker, i));
}

Answer 3

你可以像下面一样做：

var prevMarker = "";
var markers = [];
var image = { url: "your_png.png",
              scaledSize: new google.maps.Size(38, 40) // If you want to resize it.
            };

用于创建标记，

var marker = createMarker(coordinate, map, image, id);  
// coordinate = {lat:float value,long:float value} and 'map' your map
function createMarker(lat, long, map, image, marker_id) {

    var coordinates = {lat: lat, lng: long};
    var marker = new google.maps.Marker({
                position: coordinates,
                icon: image,
                id: "marker_" + marker_id,
                map: map
    });

    return marker;
}

你可以使用标记动作。

marker.addListener('click', function() {
        console.log(this.id);

        if(prevMarker !== "") {
            prevMarker.setIcon({
                url: "your_image.png",
                scaledSize: new google.maps.Size(38, 40)
            });
        }
        prevMarker = this;
        this.setIcon({
            url: "your_image.png",
            scaledSize: new google.maps.Size(48, 50)
        });
        map.panTo(this.getPosition());
    });

所有可用标记的循环标记代码。