谷歌地图标记图标（符号）不旋转答案

【问题标题】：Google Maps marker icon (symbol) not rotating谷歌地图标记图标（符号）不旋转
【发布时间】：2017-07-05 08:36:45
【问题描述】：

我昨天发布了一个问题，该问题已通过排版更正得到解决，但现在我遇到了一个令我困惑的问题。

我在地图上有一个自定义标记，使用符号作为图标，以便我可以旋转它。当我初始化它时，我将旋转设置为 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() 函数有什么不对劲的地方。我不知道是什么，但它仍然执行该功能。在全局范围内记录标记也告诉我旋转已更改。

欢迎任何想法或建议。

【问题讨论】：

标签： javascript google-maps-api-3

【解决方案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);
}

proof of concept fiddle

代码 sn-p：

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>

【讨论】：

【解决方案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/

【讨论】：