如何找到 svg 路径的谷歌地图锚点？答案

【问题标题】：How to find google map anchor point of a svg path?如何找到 svg 路径的谷歌地图锚点？
【发布时间】：2015-09-09 14:15:04
【问题描述】：

问题在于谷歌地图标记图标。如果我使用默认图标，图标的位置不会改变，但如果我使用 svg，标记的位置会发散。我想使用新的谷歌地图锚点来解决这个问题，但我不知道如何找到我的锚点svg。谁能告诉我这样做可以解决问题或我如何找到 svg 的锚点。路径如下。

路径：“M125 410 c-56 -72 -111 -176 -120 -224 -7 -36 11 -83 49 -124 76 -85 223 -67 270 31 28 60 29 88 6 150 -19 51 -122 205 -148 221 -6 3 -32 -21 -57 -54z m110 -175 c35 -34 33 -78 -4 -116 -35 -35 -71 -37 -105 -7 -40 35 -43 78 -11 116 34 41 84 44 120 7z",

【问题讨论】：

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

【解决方案1】：

根据the documentation

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

proof of concept fiddle

代码 sn-p：

var geocoder;
var map;

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
    });
  var marker = new google.maps.Marker({
    map: map,
    position: map.getCenter(),
    icon: {
      path: 'M125 410 c-56 -72 -111 -176 -120 -224 -7 -36 11 -83 49 -124 76 -85 223 -67 270 31 28 60 29 88 6 150 -19 51 -122 205 -148 221 -6 3 -32 -21 -57 -54z m110 -175 c35 -34 33 -78 -4 -116 -35 -35 -71 -37 -105 -7 -40 35 -43 78 -11 116 34 41 84 44 120 7z',
      fillColor: "blue",
      fillOpacity: 0.8,
      scale: 0.1,
      strokeColor: 'blue',
      strokeWeight: 1,
      anchor: new google.maps.Point(185, 500)

    }
  });
  var point = 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: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

【讨论】：