如何在谷歌地图上正确放置 svg 标记？答案

【问题标题】：How to correctly place svg marker on google maps?如何在谷歌地图上正确放置 svg 标记？
【发布时间】：2017-03-05 02:09:40
【问题描述】：

我有一个 svg 标记，想通过 javascript api 将其放置在谷歌地图上。

问题是我缩小地图时标记未对齐。

这是我的 svg 路径：

M20,13.8c0,5.5-4.4,9.3-10,14.2C4.4,23.1,0,19.3,0,13.8C0,8.4,4.5,4,10,4S20,8.4,20,13.8z

  new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(33.788303, -118.001511),
    icon: {
      path: "M20,13.8c0,5.5-4.4,9.3-10,14.2C4.4,23.1,0,19.3,0,13.8C0,8.4,4.5,4,10,4S20,8.4,20,13.8z",
      fillColor: '#1193c5',
      fillOpacity: 1,
      strokeWeight: 1,
      strokeColor: 'black'
    }
  });

根据我已经研究过的内容，我需要为标记设置一个锚点，但我不知道如何找到这个 svg 路径的锚点。

这是一个工作示例：https://jsbin.com/gonehocafu/edit?html,js,output

【问题讨论】：

标签： google-maps svg google-maps-markers

【解决方案1】：

如果你知道图标的大小是可以计算的。图标的路径原点是左上角，要到达底部中间，设置 x 等于图标宽度的 1/2，y 等于图标高度。对于SVG symbol：

锚点 |类型：点
符号相对于标记或折线的位置。符号路径的坐标分别由锚点的 x 和 y 坐标向左和向上平移。默认情况下，符号锚定在 (0, 0)。该位置在与符号路径相同的坐标系中表示。

我通常使用试错法。因为你的图标看起来像什么是有效的：

anchor: new google.maps.Point(10, 27)

proof of concept fiddle

代码 sn-p：

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(33.788303, -118.001511),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(33.788303, -118.001511),
    icon: {
      path: "M20,13.8c0,5.5-4.4,9.3-10,14.2C4.4,23.1,0,19.3,0,13.8C0,8.4,4.5,4,10,4S20,8.4,20,13.8z",
      fillColor: '#1193c5',
      fillOpacity: 1,
      strokeWeight: 1,
      strokeColor: 'black',
      anchor: new google.maps.Point(10, 27)
    },
  });
}
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>

【讨论】：