鼠标悬停时更改标记图标(谷歌地图V3)

问题描述：

var image = 'bullets/_st_zzzzzzl SSS.gif';

var bar1 = new google.maps.Marker({
    position: myLatLng, 
    map: map,
    icon: image,
    title: "bar number 1"       
}); 

    google.maps.event.addListener(bar1, 'mouseover', function() {
        infowindow.open(map,bar1);
    });

    google.maps.event.addListener(bar1, 'mouseout', function() {
        infowindow.close(map,bar1);
    });

现在，当我将鼠标悬停在上方时，我希望图标更改为我得到的另一张图像. 我尝试了一些技巧和一些代码，但没有用... 感谢您的帮助

Now when im on mouseover i want the icon to change to another image i got. i tried some tips and some code but nothing works... Appreciate ur help

答

使用marker.setIcon()函数.其余与代码中打开/关闭信息窗口几乎相同:

Use marker.setIcon() function. The rest is almost the same as opening/closing infowindow in your code:

var icon1 = "imageA.png";
var icon2 = "imageB.png";

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: icon1,
    title: "some marker"
});

google.maps.event.addListener(marker, 'mouseover', function() {
    marker.setIcon(icon2);
});
google.maps.event.addListener(marker, 'mouseout', function() {
    marker.setIcon(icon1);
});

请注意，除了在setIcon()函数中使用图像路径之外，还可以使用google.maps.MarkerImage对象，这非常有用，尤其是在要使用图像精灵的情况下.

Note that besides using image paths in setIcon() function, you can also use google.maps.MarkerImage objects, which are very useful, especially if you want to use image sprites.

鼠标悬停时更改标记图标(谷歌地图V3)

相关推荐