Javascript 我是否可以在单击特定图标时更改地图标记图标，然后在单击另一个图标时切换，依此类推？

这些是我的标记坐标

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'
    }
];

下面是我的代码，它对它们进行循环，在地图上创建标记，并添加一个单击事件侦听器

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

for（变量i=0；i

---

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

请尝试更改单击处理程序中的标记图标。您只需跟踪当前选定的标记并重置其他标记

marker.setIcon( otherIcon );

---

尝试更改单击处理程序中的标记图标。您只需跟踪当前选定的标记并重置其他标记

marker.setIcon( otherIcon );

---

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

var标记=[]；
函数clearSelectedMarker（）{
markers.forEach（函数（marker）{
marker.setIcon（图像）；
});
}
对于（变量i=0；i<0.length；i++）{
var beach=海滩[i]；
var marker=new google.maps.marker({
位置：{纬度：海滩[1]，液化天然气：海滩[2]}，
地图：地图，
图标：图像，
形状：形状，
标题：海滩[0]，
zIndex:海滩[3]
});
marker.addListener（'click'，function（））{
clearSelectedMarker（）；
此.setIcon（selectedSymbol）；
});
标记器。推（标记器）；
}

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

---

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

var标记=[]；
函数clearSelectedMarker（）{
markers.forEach（函数（marker）{
marker.setIcon（图像）；
});
}
对于（变量i=0；i<0.length；i++）{
var beach=海滩[i]；
var marker=new google.maps.marker({
位置：{纬度：海滩[1]，液化天然气：海滩[2]}，
地图：地图，
图标：图像，
形状：形状，
标题：海滩[0]，
zIndex:海滩[3]
});
marker.addListener（'click'，function（））{
clearSelectedMarker（）；
此.setIcon（selectedSymbol）；
});
标记器。推（标记器）；
}

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

---

您能否从

e.target

获取处理程序中的当前标记？在您的情况下，“标记”将始终是当前标记。您可能需要考虑存储您创建的所有标记的数组并跟踪选定的索引。将该索引存储在某种类型的可观察模型中，您将有一个更干净的设置。单击标记后，更新所选索引。在索引更改时，更新选定标记的图标并重置其余标记。现在，您可以从用户单击以及代码中的其他位置更改标记选择。例如，您可能需要一个位置列表，单击列表项后，高亮显示该位置的标记。谢谢。。你说得对。。我将把所有的标记放在一个数组中。你可以从

e.target

获取处理程序中的当前标记吗？在你的情况下，“标记”将始终是当前标记。您可能需要考虑存储您创建的所有标记的数组并跟踪选定的索引。将该索引存储在某种类型的可观察模型中，您将有一个更干净的设置。单击标记后，更新所选索引。在索引更改时，更新选定标记的图标并重置其余标记。现在，您可以从用户单击以及代码中的其他位置更改标记选择。例如，您可能需要一个位置列表，单击列表项后，高亮显示该位置的标记。谢谢。。你说得对。。我要把所有的标记放进一个数组