may*_*ayk 4 svg google-maps google-maps-markers
问题与谷歌地图标记图标有关。如果我使用默认图标,图标的位置不会改变,但如果我使用 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",
根据文档
锚点设置符号相对于标记或多段线的位置。符号路径的坐标分别通过锚点的 x 和 y 坐标向左和向上平移。默认情况下,符号锚定在 (0, 0)。该位置以与符号路径相同的坐标系表示。)
代码片段:
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);Run Code Online (Sandbox Code Playgroud)
html,
body,
#map_canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}Run Code Online (Sandbox Code Playgroud)
<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>Run Code Online (Sandbox Code Playgroud)