javascript - onmouseover div 时更改谷歌地图标记的图标(谷歌地图 v3 api)

Question

当我将鼠标悬停在 div 中的文本上时，如何更改 google map 上标记的图标？我设法使用

在 map 本身的标记上更改标记图标 onmouseover

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。在控制台中，鼠标悬停在 div 上我收到错误消息“Uncaught ReferenceError: marker1 is not defined”

Answer 1

为 div 添加一个 onmouseover 属性。假设它被称为 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(因为它看起来非常静态)，这样 Google 就不需要继续重新生成图形图像。

您可以设置图像的其他属性。查看documentation