本文介绍了点击其他地图时更改Google地图标记图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用高级自定义字段Google地图字段创建了Google地图多个地点信息页，
。
我设法改变了标记图标点击，但我希望在点击其他图标时将其改回。
这里是一个代码示例：
$ b $ {$ b $ pre>
for（i = 0; i< locations.length; i ++）{
marker = new google.maps.Marker（{
position：新的google.maps.LatLng（地点[i] [1]，地点[i] [2]），
地图：地图，
图标：iconBase +'Stock％20Index％20Up.png'
}）;
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function（）{
infowindow.setContent（locations [i ] [0]，locations [i] [6]）;
infowindow.open（map，marker）;
marker.setIcon（https://cdn3.iconfinder.com/data/icons/ musthave / 24 / Stock％20Index％20Down.png）;
}
}）（marker，i））;
更好地查看这里的工作代码：
解决方案
邓肯说：你想做的是将所有标记添加到数组。在你的点击事件处理程序中，遍历该数组，更新每个标记的图标。
google.maps.event.addListener（marker，'click'）然后最后将图标设置为被点击的标记。 ，函数（marker，i）{
return function（）{
infowindow.setContent（locations [i] [0]，locations [i] [6]）;
infowindow.open （map，marker）;
for（var j = 0; j markers [j] .setIcon（https://cdn3.iconfinder.com/data /icons/musthave/24/Stock%20Index%20Up.png）;
}
marker.setIcon（https://cdn3.iconfinder.com/data/icons/musthave/24/Stock ％20Index％20Down.png）;
};
工作代码片段：
新的google.maps.Map（document.getElementById（'map'），{zoom：12，// center：new google.maps.LatLng（-33.92,151.25），center：new google.maps.LatLng（36.8857， - 76.2599），mapTypeId：google.maps.MapTypeId.ROADMAP}）; var infowindow = new google.maps.InfoWindow（）; var iconBase ='https://cdn3.iconfinder.com/data/icons/musthave/24/'; var marker，i; （位置[i] [1]，位置[i] [2] ），map：map，icon：iconBase +'Stock％20Index％20Up.png'}）; google.maps.event.addListener（marker，'click'，（function（marker，i）{return function（）{infowindow.setContent（locations [i] [0]，locations [i] [6]）; infowindow。 open（map，marker）; for（var j = 0; j < script src =http://maps.google.com/maps/api/js>< / script>< div> < div id =mapstyle =width：500px; height：400px;>< / div>< / div>
I have created a Google Maps Multiple locations page,using Advanced Custom Fields Google Map field.
I have managed to make the marker icon change when clicked on, but I want it to be changed back when clicking on other icons.
here is an example of the code:
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: iconBase + 'Stock%20Index%20Up.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
}
})(marker, i));
Better look of the working code here:http://jsfiddle.net/gargiguy/s8vgxp3g
解决方案
What duncan said: What you want to do is add all your markers to an array. In your click event handler, loop over that array, updating each marker's icon. Then finally set the icon for just the marker that's been clicked.
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
for (var j = 0; j < markers.length; j++) {
markers[j].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Up.png");
}
marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
};
working code snippet:
var markers = [];
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
// center: new google.maps.LatLng(-33.92, 151.25),
center: new google.maps.LatLng(36.8857, -76.2599),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var iconBase = 'https://cdn3.iconfinder.com/data/icons/musthave/24/';
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: iconBase + 'Stock%20Index%20Up.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
for (var j = 0; j < markers.length; j++) {
markers[j].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Up.png");
}
marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
};
})(marker, i));
markers.push(marker);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
var locations = [
[
"New Mermaid",
36.9079, -76.199,
1,
"Georgia Mason",
"",
"Norfolk Botanical Gardens, 6700 Azalea Garden Rd.",
"coming soon"
],
[
"1950 Fish Dish",
36.87224, -76.29518,
2,
"Terry Cox-Joseph",
"Rowena's",
"758 W. 22nd Street in front of Rowena's",
"found"
],
[
"A Rising Community",
36.95298, -76.25158,
3,
"Steven F. Morris",
"Judy Boone Realty",
"Norfolk City Library - Pretlow Branch, 9640 Granby St.",
"found"
],
[
"A School Of Fish",
36.88909, -76.26055,
4,
"Steven F. Morris",
"Sandfiddler Pawn Shop",
"5429 Tidewater Dr.",
"found"
],
[
"Aubrica the Mermaid (nee: Aubry Alexis)",
36.8618, -76.203,
5,
"Myke Irving/ Georgia Mason",
"USAVE Auto Rental",
"Virginia Auto Rental on Virginia Beach Blvd",
"found"
]
];<script src="http://maps.google.com/maps/api/js"></script>
<div>
<div id="map" style="width: 500px; height: 400px;"></div>
</div>这篇关于点击其他地图时更改Google地图标记图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！