SVG路径点在纬度和长度而不是SVG的一侧[重复]

Question

这个问题在这里已有答案：

• How to use SVG markers in Google Maps API v3 8个答案

超级noob到SVG，但我试图将SVG路径上的点设置为lat / lng，而不是左上角/圆圈。我有如下的SVG路径，并尝试跟随指南ex。作为here，但没有运气确定在这个SVG上要改变什么来使指针在lat / lng。

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

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

let icon = {
      // url: 'https://www.shareicon.net/data/128x128/2015/09/27/108149_map_512x512.png',
      // scaledSize: new window.google.maps.Size(30, 30)
      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: 2,
        scale: .1,
    }

let marker = new window.google.maps.Marker({icon: icon})

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>