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（调用marker.icon.rotation后标记在updateMap()处的旋转值变为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);
}

proof of concept fiddle

代码段

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"></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/

Google地图标记图标（符号）未旋转

2 个答案: