在跟踪锚点的同时旋转符号

Question

我刚刚开始测试在 Google Maps API v3.9 中添加的新符号功能。我想在地图上有多个类似三角形的符号，并且我希望能够以编程方式旋转它们。我以前拥有的是一组 png 图像，其中每个图像都是上一个图像的副本，只是旋转了 10 度（MyIcon_0、MyIcon_10、...、MyIcon350）。然后我会绘制最接近我想要的旋转角度的图像。

相反，使用新的符号功能似乎是一种更简单的方法，它以编程方式完全控制旋转和颜色。

使用 SVG 路径符号，我定义了一个简单的三角形，并将其粘贴在一个 Marker 上，如下所示：

var markerOptions = {
   icon: {
        path: "M 0 5 L 20 5 L 10 40 z",
        rotation: rotationAngle,
        anchor: [something]
    },
    position: position
};

var marker = new Marker(markerOptions);

只要将“rotationAngle”设置为 0，就可以正常工作，因为我知道锚点必须是什么才能将符号放在地图中的正确位置。我希望锚点始终位于三角形的“锐角”处。

当我有另一个旋转角度时会出现问题。符号绘制在矩形画布上，画布的尺寸似乎是自动计算的，以最适合里面的形状。当您旋转像这个三角形这样的符号时，您将拥有一个基于旋转具有不同尺寸的画布，这使得很难在地图上正确定位符号，因为锚点似乎是相对于画布尺寸设置的。

如果我只能控制实际画布的大小，我将能够绘制符号，以便锚点始终位于画布的中心，然后可以设置一个恒定的锚点。这有可能吗？我在考虑在形状周围绘制一个不可见的圆圈的可能性，这将确保画布大小保持不变，但我对 SVG 路径表示法不太熟悉，我不知道这是否可以实现。

将感谢您对此事的任何建设性反馈。

Answer 1

将您的锚点设置为 (10, 20)。

var icon = {
        path: "M 0 5 L 20 5 L 10 40 z",
        scale: 1,
        strokeWeight: 2,
        fillColor: '#009933',
        fillOpacity: 0.001,
        anchor: new google.maps.Point(10, 20)
    };

工作小提琴

工作代码片段：

var icon = {
        path: "M 0 5 L 20 5 L 10 40 z",
        scale: 1,
        strokeWeight: 2,
        fillColor: '#009933',
        fillOpacity: 0.001,
        anchor: new google.maps.Point(10, 20)
    };

var map;
var angle = 0;
var marker;
var icon = {
  path: "M 0 5 L 20 5 L 10 40 z",
  scale: 1,
  strokeWeight: 2,
  fillColor: '#009933',
  fillOpacity: 0.001,
  anchor: new google.maps.Point(10, 20)
};

function init() {
  var startLatLng = new google.maps.LatLng(50.124462, -5.539994);

  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: startLatLng,
    zoom: 12
  });

  var ptMarker = new google.maps.Marker({
    position: new google.maps.LatLng(50.124462, -5.539994),
    map: map,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(4, 4)
    }
  });
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(50.124462, -5.539994),
    icon: icon
  });
  marker.setMap(map);
  var circleMarker = new google.maps.Marker({
    position: new google.maps.LatLng(50.124462, -5.539994),
    map: map,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 24,
      strokeWeight: 2,
      fillColor: '#009933',
      fillOpacity: 0.001,
      anchor: new google.maps.Point(0, 0)
    }
  });

  setInterval(function() {
    angle += 30;
    icon.rotation = angle;
    marker.setIcon(icon);
  }, 1000);

}

google.maps.event.addDomListener(window, 'load', init);

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