[英]Google Maps API JavaScript - change marker icon on click
如果這已經發布,我很抱歉,但我花了至少一個小時試圖找到正確的最新解決方案。
我可以設置自定義標記圖像,但無法為正常和單擊的 state 設置不同的標記圖像。 我發現。 這是我正在使用的代碼
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));
}
}
這部分會在單擊時更改標記圖標,但僅針對第一個,並且在單擊其他標記時不會更改為未選擇的圖標。
marker.addListener("click", () => {
marker.setIcon("/wp-content/uploads/2020/07/Selected.svg");
});
嘗試將setIcon
放入google.maps.event.addListener
例如
google.maps.event.addListener(marker, 'click', function() {
return function() {
marker.setIcon("/wp-content/uploads/2020/07/Selected.svg");
}
});
最終我明白了。 這是工作代碼。 我得到了用於列出位置的 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));
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.