Javascript Google Maps API v3：如何动态更改标记图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1941260/
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
Google Maps API v3: How do I dynamically change the marker icon?
提问by TedK
Using Google Maps API v3, how do I programmatically change the marker icon?
使用 Google Maps API v3，如何以编程方式更改标记图标？
What I would like to do is, when someone hovers over a link - to have the corresponding marker icon on the map change colors to denote the marker in question.
我想做的是，当有人将鼠标悬停在链接上时 - 让地图上相应的标记图标更改颜色以表示有问题的标记。
Essentially, the same function as what Roost does.
本质上，与 Roost 的功能相同。
When you hover over a home listing on the left, the corresponding marker on the right changes color
当您将鼠标悬停在左侧的房屋列表上时，右侧的相应标记会改变颜色
回答by Sudhir Jonathan
Call the marker.setIcon('newImage.png')... Look herefor the docs.
调用marker.setIcon('newImage.png')...在这里查看文档。
Are you asking about the actual way to do it? You could just create each div, and a add a mouseoverand mouseoutlistener that would change the icon and back for the markers.
你问的是实际的做法吗？您可以只创建 each div，并添加一个mouseover和mouseout侦听器，该侦听器将更改图标并返回标记。
回答by Roman
You can also use a circle as a marker icon, for example:
您还可以使用圆圈作为标记图标，例如：
var oMarker = new google.maps.Marker({
position: latLng,
sName: "Marker Name",
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 8.5,
fillColor: "#F00",
fillOpacity: 0.4,
strokeWeight: 0.4
},
});
and then, if you want to change the marker dynamically (like on mouseover), you can, for example:
然后，如果您想动态更改标记（如鼠标悬停时），您可以，例如：
oMarker.setIcon({
path: google.maps.SymbolPath.CIRCLE,
scale: 10,
fillColor: "#00F",
fillOpacity: 0.8,
strokeWeight: 1
})
回答by tatlar
This thread might be dead, but StyledMarkeris available for API v3. Just bind the color change you want to the correct DOM event using the addDomListener()method. This exampleis pretty close to what you want to do. If you look at the page source, change:
此线程可能已死，但StyledMarker可用于 API v3。只需使用addDomListener()方法将您想要的颜色更改绑定到正确的 DOM 事件。这个例子非常接近你想要做的。如果查看页面源，请更改：
google.maps.event.addDomListener(document.getElementById("changeButton"),"click",function() {
styleIcon.set("color","#00ff00");
styleIcon.set("text","Go");
});
to something like:
类似于：
google.maps.event.addDomListener("mouseover",function() {
styleIcon.set("color","#00ff00");
styleIcon.set("text","Go");
});
That should be enough to get you moving along.
这应该足以让你继续前进。
The Wikipedia page on DOM Eventswill also help you target the event that you want to capture on the client-side.
DOM 事件上的维基百科页面也将帮助您定位要在客户端捕获的事件。
Good luck (if you still need it)
祝你好运（如果你还需要的话）
回答by Chris B
The GMaps Utility Libraryhas a plugin called MapIconMakerthat makes it easy to generate different marker styles on the fly. It uses Google Charts to draw the markers.
该GMaps实用工具库有一个叫做插件MapIconMaker，可以很容易产生对飞不同的标记样式。它使用谷歌图表来绘制标记。
There's a good demo herethat shows what kind of markers you can make with it.
有一个很好的演示在这里，显示你可以用它做什么样的标记。
回答by Md. Noor-A-Alam Siddique
You can try this code
你可以试试这个代码
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script>
function initialize()
{
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);
var markers = [
['title-1', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.120850, '<p> Hello - 1 </p>'],
['title-2', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.420850, '<p> Hello - 2 </p>'],
['title-3', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.720850, '<p> Hello - 3 </p>'],
['title-4', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -1.020850, '<p> Hello - 4 </p>'],
['title-5', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -1.320850, '<p> Hello - 5 </p>']
];
var infoWindow = new google.maps.InfoWindow(), marker, i;
var testMarker = [];
var status = [];
for( i = 0; i < markers.length; i++ )
{
var title = markers[i][0];
var loan = markers[i][1];
var lat = markers[i][2];
var long = markers[i][3];
var add = markers[i][4];
var iconGreen = 'img/greenMarker.png'; //green marker
var iconRed = 'img/redMarker.png'; //red marker
var infoWindowContent = loan + "\n" + placeId + add;
var position = new google.maps.LatLng(lat, long);
bounds.extend(position);
marker = new google.maps.Marker({
map: map,
title: title,
position: position,
icon: iconGreen
});
testMarker[i] = marker;
status[i] = 1;
google.maps.event.addListener(marker, 'click', ( function toggleBounce( i,status,testMarker)
{
return function()
{
infoWindow.setContent(markers[i][1]+markers[i][4]);
if( status[i] === 1 )
{
testMarker[i].setIcon(iconRed);
status[i] = 0;
}
for( var k = 0; k < markers.length ; k++ )
{
if(k != i)
{
testMarker[k].setIcon(iconGreen);
status[i] = 1;
}
}
infoWindow.open(map, testMarker[i]);
}
})( i,status,testMarker));
map.fitBounds(bounds);
}
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event)
{
this.setZoom(8);
google.maps.event.removeListener(boundsListener);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="mapDiv" style="width:820px; height:300px"></div>
