Google Maps API：缩放时，SVG标记会相对于地图移动 [英] Google Maps API: SVG Marker moves relative to map when you zoom
问题描述
我在地图上创建了两个标记，一个是标准标记，另一个是使用SVG路径。缩小时，标准标记不会相对于地图移动，但SVG标记会移动。这里是一个小提琴，你可以看到我的意思：
有关如何让SVG标记相对于地图保持其位置的想法？
<！DOCTYPE html>
< html>
< head>
< meta charset =UTF-8>
< title> SVG标记移动< /标题>
< script src =http://maps.google.com/maps/api/js?v=3&sensor=false>< / script>
< style>
html，body，#map_canvas {
height：100％;
保证金：0;
}
< / style>
< / head>
< body>
< div id =map_canvas>< / div>
< script>
var islandLoc = new google.maps.LatLng（48.692492，-122.908192）;
var birdLoc = new google.maps.LatLng（48.692615936699596，-122.90869625529479）;
var map = new google.maps.Map（document.getElementById（'map_canvas'），{
zoom：19，
center：islandLoc，
disableDefaultUI： false，
zoomControl：true，
zoomControlOptions：{
style：google.maps.ZoomControlStyle.SMALL
}，
mapTypeId：google.maps.MapTypeId.SATELLITE
}）;
var island_marker = new google.maps.Marker（{
position：islandLoc，
map：map
））;
var bird_icon = {
path：m130.90909,164l54.09091，-23c0,0 -2.09091，-45 31.90909，-46c34，-1 37,6 42,23c5， 17 -30,56 -30,71c0,15 23,21 56,40c33,19 56,62 64,81c8,19 14,39 21,46c7,7 16,16 15.09091,16c-0.90909,0 -14.09091,7 - 15,7c-0.90909,0 -37.09091，-23-46.09091，-23c-9,0-35，-6-57，-15c-22，-9-35，-21-35.90909，-21c-0.90909,0 0.90909,18 -0.09091,27c-1,9 -5,27 -5.90909,27c-0.90909,0 -7.09091，-15 -7.09091，-20c0，-5 5，-19 4.09091，-19c-0.90909,0 -3.09091 ，-16 -4，-16c-0.90909,0 -12.09091,0 -13,0c-0.90909,0 2.90909,10 0.90909,17c-2,7 2,31 1.09091,31c-0.90909,0 -17.09091,14 -18 ，14c-0.90909,0 8.90909，-20 8，-20c-0.90909,0 -1.09091，-15 -2.09091，-20c-1，-5 -5，-22 -5.90909，-22c-0.90909,0 -15.09091， -9 -29.09091，-50c-14，-41 37，-86 39，-93c2，-7 -8，-19 -8.90909，-19c-0.90909,0 -59.09091,7 -59.09091,7z，
fillColor：'＃000000'，
strokeColor：'#FFFFFF'，
fillOpacity：1，
strokeWeight：1，
比例：.15
}
var bird_marker = new google.maps.Marker（{
position：birdLoc，
map：map，
icon：bird_icon
}）;
< / script>
< / body>
< / html>
您必须定义符号的锚符号的默认值是左上角，而图像的默认值是底部中心）
对于这个特定的符号，底部中心点的点将大约为code> 258,381
演示： http://jsfiddle.net/a3LKP/5/
计算的解释我们假设你没有自己创建路径（符号），用给定路径创建一个SVG文档：
< svg
xmlns：svg =http://www.w3.org/2000/svg
xmlns =http://www.w3.org/2000/svg
version =1.0>
< g>
< / svg>
使用inkscape打开此文档。
首先到文件 - >文档属性 - >页面来确定文档高度（对于我来说它是 1052.36px ，我想这是默认）
文档高度： 1052.36
object-x： 130.909
对象-y： 671.362
物件宽度：254.155
物件高度：286.093
计算底部的y：
从文档高度减去object-y（1052-671 = 381 ）
计算中心的x：
添加一半对象的宽度x（131+（254/2）= 258 ）
所以锚是 new google.maps.Point（258,381）
I have created two markers on a map, one a standard marker, the other using an SVG path. The standard marker does not move relative to the map when I zoom out, but the SVG marker does. Here is a fiddle where you can see what I mean:
Any thoughts on how to get the SVG marker to hold its place relative to the map?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG Marker Moves</title>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<style>
html, body, #map_canvas {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
<script>
var islandLoc = new google.maps.LatLng(48.692492,-122.908192);
var birdLoc = new google.maps.LatLng(48.692615936699596, -122.90869625529479);
var map = new google.maps.Map(document.getElementById('map_canvas'),{
zoom: 19,
center: islandLoc,
disableDefaultUI: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var island_marker = new google.maps.Marker({
position: islandLoc,
map: map
});
var bird_icon = {
path: "m130.90909,164l54.09091,-23c0,0 -2.09091,-45 31.90909,-46c34,-1 37,6 42,23c5,17 -30,56 -30,71c0,15 23,21 56,40c33,19 56,62 64,81c8,19 14,39 21,46c7,7 16,16 15.09091,16c-0.90909,0 -14.09091,7 -15,7c-0.90909,0 -37.09091,-23 -46.09091,-23c-9,0 -35,-6 -57,-15c-22,-9 -35,-21 -35.90909,-21c-0.90909,0 0.90909,18 -0.09091,27c-1,9 -5,27 -5.90909,27c-0.90909,0 -7.09091,-15 -7.09091,-20c0,-5 5,-19 4.09091,-19c-0.90909,0 -3.09091,-16 -4,-16c-0.90909,0 -12.09091,0 -13,0c-0.90909,0 2.90909,10 0.90909,17c-2,7 2,31 1.09091,31c-0.90909,0 -17.09091,14 -18,14c-0.90909,0 8.90909,-20 8,-20c-0.90909,0 -1.09091,-15 -2.09091,-20c-1,-5 -5,-22 -5.90909,-22c-0.90909,0 -15.09091,-9 -29.09091,-50c-14,-41 37,-86 39,-93c2,-7 -8,-19 -8.90909,-19c-0.90909,0 -59.09091,7 -59.09091,7z",
fillColor: '#000000',
strokeColor: '#FFFFFF',
fillOpacity: 1,
strokeWeight: 1,
scale:.15
}
var bird_marker = new google.maps.Marker({
position: birdLoc,
map: map,
icon: bird_icon
});
</script>
</body>
</html>
You must define the anchor for the symbol(for a symbol the default is the top left corner, while default for a image is the bottom center)
For this specific symbol the Point for a bottom center anchor would be approximately 258,381
Demo: http://jsfiddle.net/a3LKP/5/
Explanation of the calculation of the origin at bottom center(for inkscape).
Let's assume you didn't create the path(symbol) on your own, create a SVG-document with the given path:
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.0">
<g>
<path d="m130.90909,164l54.09091,-23c0,0 -2.09091,-45 31.90909,-46c34,-1 37,6 42,23c5,17 -30,56 -30,71c0,15 23,21 56,40c33,19 56,62 64,81c8,19 14,39 21,46c7,7 16,16 15.09091,16c-0.90909,0 -14.09091,7 -15,7c-0.90909,0 -37.09091,-23 -46.09091,-23c-9,0 -35,-6 -57,-15c-22,-9 -35,-21 -35.90909,-21c-0.90909,0 0.90909,18 -0.09091,27c-1,9 -5,27 -5.90909,27c-0.90909,0 -7.09091,-15 -7.09091,-20c0,-5 5,-19 4.09091,-19c-0.90909,0 -3.09091,-16 -4,-16c-0.90909,0 -12.09091,0 -13,0c-0.90909,0 2.90909,10 0.90909,17c-2,7 2,31 1.09091,31c-0.90909,0 -17.09091,14 -18,14c-0.90909,0 8.90909,-20 8,-20c-0.90909,0 -1.09091,-15 -2.09091,-20c-1,-5 -5,-22 -5.90909,-22c-0.90909,0 -15.09091,-9 -29.09091,-50c-14,-41 37,-86 39,-93c2,-7 -8,-19 -8.90909,-19c-0.90909,0 -59.09091,7 -59.09091,7z"/>
</g>
</svg>
Open this document with inkscape.
First go to File->document-properties->page to determine the document-height(for me it's 1052.36px , I guess that's the default)
Then click on the symbol to select it, in the menubar you should see the properties of the object: X , Y , W(idth), (H)eight.
For me it's now:
document-height: 1052.36
object-x: 130.909
object-y: 671.362
object-width: 254.155
object-height: 286.093
calculating the y of the bottom :
substract the object-y from the document-height(1052-671=381)
calculating the x of the center :
add the half of the objects width to the objects x(131+(254/2)=258)
So the anchor is new google.maps.Point(258,381)
这篇关于Google Maps API：缩放时，SVG标记会相对于地图移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
