时间戳

首页 > 解决方案 > 地图渲染后如何以编程方式更改谷歌地图标记图标

javascript - 地图渲染后如何以编程方式更改谷歌地图标记图标

问题描述

在呈现地图后，我需要在客户端 javascript 中以编程方式更改 Google 地图标记显示的图标。有没有办法做到这一点？

我有一个包含 32 个标记的网页，当我通过 websocket 连接收到消息时，我需要能够更改其中一些标记的图标。我希望能够使用 getElementById 来访问相关的 DOM 元素。我尝试在标记初始化闭包中设置一个 id，但 getElementById 找不到这个 id。

编辑我原来的问题中的这段代码不起作用。

var marker_02 = new google.maps.Marker({
    position: {lat: 51.12345, lng:-0.12345},
    map: map,
    icon: "purple_icon.png",
    title: "02",
    url: "02.html",
    id: "marker_02"
});
google.maps.event.addListener(marker_02, "click", function() {
    window.location.href = this.url;
});
var addr = "ws://192.168.12.247:8080/ws";
var websocket = new WebSocket( addr);
websocket.onmessage = function(e){
    var message = e.data;
    console.log("message received:" + message);
    if (message == "alarm") {
        document.getElementById("marker_02").icon = "red_icon.png";
    }
}

编辑 - 在得出动态更改标记图标的唯一方法是删除它并使用新设置创建一个新的结论之后的最终解决方案......

var addr = "ws://192.168.12.247:8080/ws";
var websocket = new WebSocket( addr );
websocket.onmessage = function(e){
    var message = e.data;
    //console.log("message received:" + message);
    if (message == "alarm_02") {
        console.log("received alarm_02");
        // Remove marker by setting Map to null:
        marker_02.setMap(null);
        // Create new red marker:
        marker_02 = new google.maps.Marker({
            position: {lat: 51.12345, lng:-0.12345},
            map: map,
            icon: "red_icon.png",
            title: "02",
            url: "02.html"
        });
    };
};

标签： javascriptgoogle-mapsdom

解决方案

我不知道这是否真的是你需要的，但我会尽力帮助你。认为每个标记都是一个具有其属性的对象，其中一个是指为相关标记的图标赋予形状的文件，只需每次创建标记时都必须指出要成为哪个文件塑造标记的一种。考虑到这一点，您应该知道 getElementById 不起作用，因为对象根本没有 id。要更改它，您应该执行以下操作：

websocket.onmessage = function(e){
    var message = e.data;
    console.log("message received:" + message);
    if (message == "alarm") {
        marker_02.icon = "red_icon.png";
    }
}

推荐阅读