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

javascript google-maps google-maps-api-3

2022-08-30 05:23:56

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

我想做的是，当有人将鼠标悬停在链接上时 - 让地图上相应的标记图标更改颜色以表示有问题的标记。

从本质上讲，与Roost的功能相同。

当您将鼠标悬停在左侧的房源上时，右侧的相应标记会更改颜色

答案 1

调用 ...请在此处查找文档。marker.setIcon('newImage.png')

您是否在询问实际操作方法？您可以只创建每个，并添加一个和侦听器，该侦听器将更改标记的图标并返回。divmouseovermouseout

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