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

【问题标题】：SVG path point at lat and long rather than side of SVG [duplicate]SVG路径点在纬度和经度而不是SVG的一侧[重复]
【发布时间】：2019-02-11 02:02:39
【问题描述】：

SVG 的超级菜鸟，但我试图将 SVG 路径上的点设置为 lat/lng，而不是左上角/圆。我有如下的 SVG 路径，并尝试按照指南进行操作。作为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})

【问题讨论】：

您还必须引用 map 本身以将标记附加到，并引用 position（纬度、经度）以将其实际放置在所需的坐标处。见this answer
是的，我有位置、标题等，后来也用地图引用，图标显示正常，只是没有指向我想要的纬度/经度，只是为了合并而删除，因此我说我如果需要，可以提供更多/完整的代码
问题在于实例化google.maps.Marker部分，所以我只提供它的完整代码，icon代码可以一起跳过。

标签： javascript reactjs google-maps svg

【解决方案1】：

想出了一个答案，

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

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

【讨论】：

我明白了，您正在寻找有关如何偏移图标中心而不是如何将图标放置在特定坐标处的答案。至少对我来说，这个问题并不清楚。
没问题，（有时很难解释一个人在做什么......）感谢您的帮助！

【解决方案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

代码 sn-p：

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>

【讨论】：