Question

问题是关于谷歌地图标记图标。如果我使用默认图标图标的位置没有改变，但如果我使用svg，标记发散的位置。我想使用新的谷歌地图锚点来解决这个问题，但我不知道我是如何找到我的锚点svg.Can有人告诉我这样做可以解决问题或者我是如何找到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“，

Answer 1

根据the documentation

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

proof of concept fiddle

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何找到一个svg路径的谷歌地图锚点？

1 个答案: