分享程序员开发的那些事...
更新时间：2022-10-21 20:57:59
根据文档
锚点设置符号相对于标记或多段线的位置。符号路径的坐标分别由锚的x和y坐标向左和向上平移。 默认情况下，符号固定在（0，0）处。该位置在与符号路径相同的坐标系中表示。）
程式码片段：
html，body，＃map_canvas {height：500px;宽度：500px; margin：0px; < script src =https：// //maps.googleapis.com/maps/api/js\"></script><div id =map_canvasstyle =width：750px; height：450px; border：2px solid＃3872ac;> < / div>
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.)
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>