在onmouseover div上更改谷歌地图标记的图标(Google maps v3 api)

Question

当我将鼠标悬停在div中的文本时,如何更改谷歌地图上标记的图标？我设法使用在地图本身的标记上更改标记图标

google.maps.event.addListener(marker1, "mouseover", function(event) {
            this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200");
}

编辑:

这就是我现在拥有的:

function initialize(){
....
var marker1 = new google.maps.Marker({  

            position: new google.maps.LatLng(1.288693,103.846733),

            map: map,

            icon: "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|ffffff"

        }); 
....
}


function changeMarker(marker) {

            alert(marker);

    }

和

<div id="searchresult" onmouseover="changeMarker(marker1)">

我正在使用Chrome.在控制台中,onmouseover div我得到错误"Uncaught ReferenceError:marker1未定义"

Answer 1

将一个onmouseover属性添加到div.让我们说它叫做changeMarker.

function changeMarker(marker) {
    var icon = new Google.maps.MarkerImage({ url:"http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200"});
    marker.setIcon(icon);
}

你的div可能看起来像:

<div onmouseover="changeMarker(marker1)">

我建议缓存MarkerImage(因为它看起来很静态),因此谷歌不需要继续重新生成图形图像.

您可以设置图像的其他属性.请参阅文档