如何找到一个svg路径的谷歌地图锚点？ [英] How to find google map anchor point of a svg path?

问题描述

问题在于谷歌地图标记图标。如果我使用默认图标，图标的位置不会改变，但是如果我使用svg，标记发散的位置。我想要使用新的Google地图定位点来解决此问题，但我不知道如何找到我的定位点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 -40 -43 78 -11 116 34 41 84 44 120 7z，

解决方案

根据文档

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

概念证明小提琴

程式码片段：

html，body，＃map_canvas {height：500px;宽度：500px; margin：0px; < script src =https：//

The problem is about google map marker icons. If i use default icon the position of icon is not changing but if i use a svg,the position of marker diverging.I want to use new google map anchor point for fix this problem but i dont know how i find the anchor point of my svg.Can anyone tell me doing that fix the problem or how i find anchor point of svg.The path is below.

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",

解决方案

According to the documentation

anchor sets the position of the symbol relative to the marker or polyline. The coordinates of the symbol's path are translated left and up by the anchor's x and y coordinates respectively. By default, a symbol is anchored at (0, 0). The position is expressed in the same coordinate system as the symbol's path.)

proof of concept fiddle

code snippet:

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"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

这篇关于如何找到一个svg路径的谷歌地图锚点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！