呈現地圖后如何以編程方式更改Google Maps標記圖標

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";
    }
}