在 LatLon 上将谷歌地图符号路径居中答案

【问题标题】：Centering google maps SymbolPath on LatLon在 LatLon 上将谷歌地图符号路径居中
【发布时间】：2019-09-14 06:46:37
【问题描述】：

有没有办法让 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);

【问题讨论】：

标签： google-maps google-maps-api-3

【解决方案1】：

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

fiddle demonstrating that at various rotations

通过实验找到最简单的方法是移除旋转，然后使用锚点来查看它的去向。

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)
    },
});

working fiddle

工作代码sn-p：

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
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

【讨论】：