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

时间:2011-11-20 01:00:08

标签: google-maps-api-3

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

现在当我正在鼠标悬停时,我想让图标更改为我得到的另一张图片。 我尝试了一些提示和一些代码,但没有任何作用...... 感谢您的帮助

2 个答案:

答案 0 :(得分:58)

使用marker.setIcon()功能。其余几乎与您的代码中打开/关闭信息窗口相同:

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个对象,这些对象非常有用,特别是如果您想使用图像精灵。

答案 1 :(得分:0)

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

// assuming you also want to hide the infowindow when user mouses-out
google.maps.event.addListener(marker, 'mouseout', function() {
    infowindow.close();
});