我是否可以在单击特定图标时更改地图标记图标，然后在单击另一个图标时切换，等等

Is it possible for me to change a map marker icon when the specific icon is clicked and then to toggle when another one is clicked and so on?

本文关键字：图标 单击 然后 是否 另一个 等等 地图      更新时间：2023-09-26

这些是我的标记坐标。

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

循环中生成的原始标记有一个图像标记"images/marker.png"。单击时，我想用"images/maarker2.png"替换它，并切换它们。。如果能朝着正确的方向轻推，我们将不胜感激。。

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/

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

marker.setIcon( otherIcon );

https://developers.google.com/maps/documentation/javascript/reference#Marker

相关文章：