SVG路径点位于lat和long而不是SVG的侧面

Question

SVG的超级菜鸟，但我试图将SVG路径上的点设置为经/纬度，而不是左上角/圆。我有以下SVG路径，并尝试遵循指南ex。像here一样，但没有弄清楚该SVG上要进行哪些更改以使指针指向经纬度。

是否有一个站点可以帮助创建SVG或移动所有路径坐标？

如果需要，我可以提供更多代码；

<button appDoubleClick (click)="test($event)">Test</button>

Answer 1

找出答案，

我将SVG的锚点设置为点M，这很好用，（M是移动到绝对坐标x，y）

anchor: new window.google.maps.Point(172.268, 501.67),

Answer 2

看起来锚点应该是：

anchor: new google.maps.Point(195, 510)

定义图标：

let icon = {
  path: 'M 172.268,501.67 C 26.97,291.031 0,269.413 0,192 0,85.961 85.961,0 192,0 c 106.039,0 192,85.961 192,192 0,77.413 -26.97,99.031 -172.268,309.67 -9.535,13.774 -29.93,13.773 -39.464,0 z',
  fillColor: '#000000',
  fillOpacity: 1,
  strokeColor: '#000',
  strokeWeight: 0, // fixes an artifact on the right side of the icon
  scale: 0.1,
  anchor: new google.maps.Point(195, 510)
}

proof of concept fiddle

代码段：

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  let icon = {
    path: 'M 172.268,501.67 C 26.97,291.031 0,269.413 0,192 0,85.961 85.961,0 192,0 c 106.039,0 192,85.961 192,192 0,77.413 -26.97,99.031 -172.268,309.67 -9.535,13.774 -29.93,13.773 -39.464,0 z',
    fillColor: '#000000',
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 0,
    scale: 0.1,
    anchor: new google.maps.Point(195, 510)
  }

  let marker = new google.maps.Marker({
    icon: icon,
    map: map,
    position: map.getCenter()
  });
  // reference point
  var measle = new google.maps.Marker({
    map: map,
    position: map.getCenter(),
    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(3.5, 3.5)
    }
  })
}
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>