javascript - 我是否可以在单击特定图标时更改 map 标记图标，然后在单击另一个图标时进行切换等等？

Question

这些是我的标记坐标。

var markers = [
    {
       "title": 'Burrel',
        "lat": '41.6065764',
        "lng": '20.0130826',
    },
    {
        "title": 'Grabian',
        "lat": '40.9501',
        "lng": '19.583533'
    },
    {
        "title": 'Spac',
        "lat": '41.899017',
        "lng": '20.0456071'
    }
];

下面是我的代码，它循环遍历它们并在 map 上创建标记以及添加点击事件监听器

 for (var i = 0; i < markers.length; i++) {
      var data = markers[i];
      var myLatlng = new google.maps.LatLng(data.lat, data.lng);
      var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: data.title,
            icon: 'images/marker.png'
      });

  (function (marker, data) {
      google.maps.event.addListener(marker, "click", function (e) {
                var x = document.getElementsByClassName("displayblock")[0];
                x.style.zIndex=0;
                x.className = "w-clearfix slide";
                var d = document.getElementById(this.title);
                d.className = "w-clearfix slide displayblock";
                d.style.zIndex=1;   
        });
                })(marker, data);
    }

循环中生成的原始标记有一个图像标记“images/marker.png”，我想在单击时将其替换为“images/marker2.png”并切换它们..朝正确方向轻推将不胜感激..

Answer 1

setIcon 将用于切换标记，但复杂性在于添加事件监听器并以干净的方式清除未选定的图标。在循环中，您可以将事件监听器直接添加到标记:

marker.addListener('click', function() {
  this.setIcon(selectedSymbol);
});

您可以通过添加到类似于@tkdave建议的数组来管理所有标记:

var markers = [];
function clearSelectedMarker() {
  markers.forEach(function(marker) {
    marker.setIcon(image);
  });
}
for (var i = 0; i < beaches.length; i++) {
  var beach = beaches[i];
  var marker = new google.maps.Marker({
    position: {lat: beach[1], lng: beach[2]},
    map: map,
    icon: image,
    shape: shape,
    title: beach[0],
    zIndex: beach[3]
  });
  marker.addListener('click', function() {
    clearSelectedMarker();
    this.setIcon(selectedSymbol);
  });
  markers.push(marker);
}

对我来说，这也更具可读性。

https://jsfiddle.net/fpgya6Lq/1/