Question

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

我有一个包含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"
        });
    };
};

Answer 1

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

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

呈现地图后如何以编程方式更改Google Maps标记图标

1 个答案: