将谷歌地图 SymbolPath 置于 LatLon 中心

Question

有没有办法让 google.maps.SymbolPath.FORWARD_CLOSED_ARROW 将图标的中心放在 LatLng 位置。似乎是把箭头的尖端放在那里。

我尝试过使用锚点进行实验，但没有成功。

这是我的示例代码：

    var marker=new google.maps.Marker({
position: new google.maps.LatLng(50.124462, -5.539994),
icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        scale: 8,
        strokeWeight: 2,
        fillColor: '#009933',
        fillOpacity: 1,
        rotation: 210,
        anchor: new google.maps.Point(0, 0)
      },
});
marker.setMap(map);

Answer 1

对于该符号，使用 (0,2.6) 的锚点

小提琴证明在不同的旋转

通过实验找到的最简单方法是删除旋转，然后使用锚点看看它去了哪里。

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(50.124462, -5.539994),
    icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        scale: 8,
        strokeWeight: 2,
        fillColor: '#009933',
        fillOpacity: 1,
        rotation: 210,
        anchor: new google.maps.Point(0,2.6)
    },
});

工作小提琴

工作代码片段：

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(50.124462, -5.539994),
    icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        scale: 8,
        strokeWeight: 2,
        fillColor: '#009933',
        fillOpacity: 1,
        rotation: 210,
        anchor: new google.maps.Point(0,2.6)
    },
});

var map;

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 marker = new google.maps.Marker({
    position: new google.maps.LatLng(50.124462, -5.539994),
    map: map
  });
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(50.124462, -5.539994),
    icon: {
      path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
      scale: 8,
      strokeWeight: 2,
      fillColor: '#009933',
      fillOpacity: 1,
      rotation: 210,
      anchor: new google.maps.Point(0, 2.6)
    },
  });
  marker.setMap(map);
}

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

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