Google Maps API v3:如何动态更改标记图标？

Question

使用Google Maps API v3,如何以编程方式更改标记图标？

我想做的是,当有人在链接上盘旋时 - 在地图上使用相应的标记图标更改颜色以表示相关标记.

基本上,与Roost的功能相同.

将鼠标悬停在左侧的主页列表上时,右侧的相应标记会更改颜色

Answer 1

打电话给marker.setIcon('newImage.png')......看看这里的文档.

你在问这个实际的方法吗？你可以只创建每个div以及添加一个mouseover与mouseout侦听器将改变图标,背面为标志.

Answer 2

您还可以使用圆圈作为标记图标,例如:

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

Answer 3

此线程可能已失效,但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");
});

这应该足以让你继续前进.

DOM Events上的Wikipedia页面还将帮助您定位要在客户端捕获的事件.

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

Answer 4

该GMaps实用工具库有一个叫做插件MapIconMaker,可以很容易产生对飞不同的标记样式.它使用Google Charts绘制标记.

有一个很好的演示在这里显示你可以用它做什么样的标记.