Google Maps API v3: How do I dynamically change the marker icon?

小开

打电话给 marker.setIcon('newImage.png')... 看给你的文件。

Are you asking about the actual way to do it? You could just create each div, and a add a mouseover and mouseout listener that would change the icon and back for the markers.

小开

The GMaps 实用程序库 has a plugin called MapIconMaker that makes it easy to generate different marker styles on the fly. It uses Google Charts to draw the markers.

有一个很好的演示给你，显示什么样的标记，你可以使用它。

小开

这个线程可能已经死了，但是 StyledMarker可以用于 API v3。只需使用 AddDomListener ()方法将您想要的颜色更改绑定到正确的 DOM 事件。这个例子非常接近你想要做的。如果您查看页面源代码，请更改:

google.maps.event.addDomListener(document.getElementById("changeButton"),"click",function() {
styleIcon.set("color","#00ff00");
styleIcon.set("text","Go");
});

比如:

google.maps.event.addDomListener("mouseover",function() {
styleIcon.set("color","#00ff00");
styleIcon.set("text","Go");
});

这应该足够让你继续前进了。

The Wikipedia page on DOM 事件 will also help you target the event that you want to capture on the client-side.

祝你好运(如果你还需要的话)

小开

你也可以用一个圆作为标记图标，例如:

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
},
});

然后，如果你想动态改变标记(就像鼠标悬停) ，你可以，例如:

oMarker.setIcon({
path: google.maps.SymbolPath.CIRCLE,
scale: 10,
fillColor: "#00F",
fillOpacity: 0.8,
strokeWeight: 1
})

小开

你可以试试这个代码

    <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>