谷歌地图API JavaScript-点击更改标记图标

我很抱歉，如果这已经张贴，但我花了至少一个小时试图找到适当的最新解决方案

我可以设置自定义标记图像，但无法为正常和单击状态设置不同的标记图像。我找到了。这是我正在使用的代码

var map = new google.maps.Map(document.getElementById('map'), {
                        zoom: 14,
                        center: center
                    });
                    var infowindow = new google.maps.InfoWindow({});
                    var marker, count;
                    for (count = 0; count < locations.length; count++) {
                        marker = new google.maps.Marker({
                            position: new google.maps.LatLng(locations[count][1], locations[count][2]),
                            map: map,
                            title: locations[count][0],
                            icon: image
                        });

                        marker.addListener("click", () => {
                            marker.setIcon("/wp-content/uploads/2020/07/Selected.svg");
                        });

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

---

尝试将

setIcon

放入

google.maps.event.addListener

e、 g

---

最终我弄明白了。这是工作代码。我得到了列出位置的PHP部分，但这足以回答这个问题

var markers = [];
                        var normalIcon = '/wp-content/uploads/2020/07/Pin.svg';
                        var activeIcon = '/wp-content/uploads/2020/07/Selected.svg';

                        var map = new google.maps.Map(document.getElementById('map'), {
                            zoom: 14,
                            center: center
                        });
                        var infowindow = new google.maps.InfoWindow({});
                        var marker, count;
                        for (count = 0; count < locations.length; count++) {
                            marker = new google.maps.Marker({
                                position: new google.maps.LatLng(locations[count][1], locations[count][2]),
                                map: map,
                                title: locations[count][0],
                                icon: normalIcon
                            });
                            markers.push(marker);
                            google.maps.event.addListener(marker, 'click', (function(marker, count) {
                                return function() {
                                    for (var j = 0; j < markers.length; j++) {
                                        markers[j].setIcon(normalIcon);
                                    }
                                    this.setIcon(activeIcon);
                                    infowindow.setContent(locations[count][0]);
                                    infowindow.open(map, marker);
                                }
                            })(marker, count));
                        }

var标记=[]；
var normalIcon='/wp content/uploads/2020/07/Pin.svg'；
var activeIcon='/wp content/uploads/2020/07/Selected.svg'；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：14，
中心：中心
});
var infowindow=new google.maps.infowindow（{}）；
var标记，计数；
对于（计数=0；计数

非常感谢您！它会在单击时更改标记图标，但如果我转到另一个标记，它不会将图标还原为默认图标。在这种情况下，您需要在标记对象中存储一些状态，例如

isSelected:boolean

，并根据此属性，您可以决定显示、选择或默认的标记图标

google.maps.event.addListener(marker, 'click', function() {
  return function() {
    marker.setIcon("/wp-content/uploads/2020/07/Selected.svg");
  }
});

var markers = [];
                        var normalIcon = '/wp-content/uploads/2020/07/Pin.svg';
                        var activeIcon = '/wp-content/uploads/2020/07/Selected.svg';

                        var map = new google.maps.Map(document.getElementById('map'), {
                            zoom: 14,
                            center: center
                        });
                        var infowindow = new google.maps.InfoWindow({});
                        var marker, count;
                        for (count = 0; count < locations.length; count++) {
                            marker = new google.maps.Marker({
                                position: new google.maps.LatLng(locations[count][1], locations[count][2]),
                                map: map,
                                title: locations[count][0],
                                icon: normalIcon
                            });
                            markers.push(marker);
                            google.maps.event.addListener(marker, 'click', (function(marker, count) {
                                return function() {
                                    for (var j = 0; j < markers.length; j++) {
                                        markers[j].setIcon(normalIcon);
                                    }
                                    this.setIcon(activeIcon);
                                    infowindow.setContent(locations[count][0]);
                                    infowindow.open(map, marker);
                                }
                            })(marker, count));
                        }