谷歌地圖標記圖標（符號）不旋轉

Question

我昨天發布了一個問題，該問題已通過排版更正解決，但現在我遇到了一個令我困惑的問題。

我在地圖上有一個自定義標記，使用符號作為圖標，以便我可以旋轉它。 當我初始化它時，我將旋轉設置為 0，並且在某個時候將調用updateMap()函數，該函數應該為標記提供一個新的旋轉值。 確實如此，我可以通過在控制台中打印標記及其圖標來看到旋轉已更改，但標記仍然堅定地指向北方。

這是我用於初始化和旋轉標記的代碼：

var map;
var marker;

function initMap(position) {
    var map_div = document.getElementById("map");
    map = new google.maps.Map(map_div, {
        zoom: 14,
        center: { lat: position.Latitude, lng: position.Longitude },
        mapTypeId: 'terrain'
    });
    marker = new google.maps.Marker({
        position: map.getCenter(),
        map: map,
        title: "MY MARKER",
        icon: {
            path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
            scale: 4,
            strokeColor: '#00F',
            rotation: 0,
        }
    });
}

function updateMap() {
    var bearing = 135;
    console.log(bearing);
    marker.icon.rotation = bearing;
    console.log(marker);
}

控制台告訴我標記的旋轉發生了變化，但標記本身並沒有改變方向。

我嘗試過的事情：

• 在更新地圖功能結束時觸發resize事件

• 未指定圖標的原始旋轉

• 切換旋轉，因此從 135 開始並嘗試更改為 0（在調用updateMap()后， marker.icon.rotation處的標記旋轉值變為 0，但實際標記一直指向 135）

• 在initMap()函數的末尾更改旋轉權 - 這確實有效，這讓我相信updateMap()函數有一些不正確的地方。 我不知道是什么，它仍然執行該功能。 在全局范圍內記錄標記也告訴我旋轉已經改變。

歡迎任何想法或建議。

Answer 1

google.maps.Marker對象沒有記錄的icon屬性（雖然它可以“工作”，但不建議使用未記錄的屬性）。 使用記錄的 setter 和 getter 獲取值，更改它，然后再次設置它：

function updateMap() {
    var bearing = 135;
    console.log(bearing);
    var icon = marker.getIcon();
    icon.rotation = bearing;
    marker.setIcon(icon);
    console.log(marker);
}

概念證明小提琴

代碼片段：

 var map; var marker; function initMap(position) { var map_div = document.getElementById("map"); map = new google.maps.Map(map_div, { zoom: 14, center: { lat: position.Latitude, lng: position.Longitude }, mapTypeId: 'terrain' }); marker = new google.maps.Marker({ position: map.getCenter(), map: map, title: "MY MARKER", icon: { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, scale: 4, strokeColor: '#00F', rotation: 0, } }); } function updateMap(bearing) { var icon = marker.getIcon(); icon.rotation = bearing; marker.setIcon(icon); } function initialize() { initMap({ Latitude: 37.4419, Longitude: -122.1419 }); } google.maps.event.addDomListener(window, "load", initialize);

 html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <input type="button" value="rotate" onclick="updateMap(parseInt(document.getElementById('rotation').value));" /><input id="rotation" value="135" /> <div id="map"></div>

Answer 2

您可以將updateMap函數更改為：

function updateMap() {
  var bearing = 135;
  console.log(marker.icon);
  marker.icon.rotation = bearing;
  marker.setMap(map);
  console.log(marker.icon);
}

marker.setMap(map); 選項更新后重新添加到地圖

JSFiddle ： https : //jsfiddle.net/q3wjrpdw/8/