javascript 单击其他时更改 Google 地图标记图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27754101/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change Google Maps marker icon when clicking on other
提问by gargi
I have created a Google Maps Multiple locations page, using Advanced Custom Fields Google Map field.
我使用高级自定义字段 Google 地图字段创建了一个 Google 地图多个位置页面。
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
更好地查看此处的工作代码：http: //jsfiddle.net/gargiguy/s8vgxp3g
回答by geocodezip
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>回答by Ryan
Since it sounds like you only need to change the previous icon back to the original, I wouldn't recommend looping through every marker. In a map with a lot of markers, this could become quite heavy.
由于听起来您只需要将之前的图标改回原始图标，因此我不建议遍历每个标记。在有很多标记的地图中，这可能会变得很重。
Instead, I would store the active marker in a variable on the click event, and just update that one when it changes.
相反，我会将活动标记存储在点击事件的一个变量中，并在它发生变化时更新该标记。
var marker;
var activeMarker;
var iconDefault = iconBase + 'Stock%20Index%20Up.png';
var iconSelected = 'https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png';
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: iconDefault
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
// check to see if activeMarker is set
// if so, set the icon back to the default
activeMarker && activeMarker.setIcon(iconDefault);
// set the icon for the clicked marker
marker.setIcon(iconSelected);
// update the value of activeMarker
activeMarker = marker;
}
})(marker, i));
}
回答by Nahush Sarje
You can do same like below:
您可以执行以下操作：
var prevMarker = "";
var markers = [];
var image = { url: "your_png.png",
scaledSize: new google.maps.Size(38, 40) // If you want to resize it.
};
For creating marker,
为了创建标记，
var marker = createMarker(coordinate, map, image, id);
// coordinate = {lat:float value,long:float value} and 'map' your map
function createMarker(lat, long, map, image, marker_id) {
var coordinates = {lat: lat, lng: long};
var marker = new google.maps.Marker({
position: coordinates,
icon: image,
id: "marker_" + marker_id,
map: map
});
return marker;
}
For marker action you can use.
对于标记操作，您可以使用。
marker.addListener('click', function() {
console.log(this.id);
if(prevMarker !== "") {
prevMarker.setIcon({
url: "your_image.png",
scaledSize: new google.maps.Size(38, 40)
});
}
prevMarker = this;
this.setIcon({
url: "your_image.png",
scaledSize: new google.maps.Size(48, 50)
});
map.panTo(this.getPosition());
});
loop marker code for all markers available.
所有可用标记的循环标记代码。
