Question

我有一个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

Answer 1

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

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

我经常使用反复试验。对于你的图标看起来有效：

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

proof of concept fiddle

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: