程序员经验分享-hwhale

Google Maps API：缩放时 SVG 标记相对于地图移动

2023-12-31

我在地图上创建了两个标记，一个是标准标记，另一个使用 SVG 路径。当我缩小时，标准标记不会相对于地图移动，但 SVG 标记会相对移动。这是一个小提琴，你可以明白我的意思：

http://jsfiddle.net/9A4ET/ http://jsfiddle.net/9A4ET/

关于如何让 SVG 标记保持其相对于地图的位置有什么想法吗？

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>SVG Marker Moves</title>
    <script src="http://maps.google.com/maps/api/js?v=3&amp;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>

您必须定义符号的锚点（对于符号，默认为左上角，而图像的默认为底部中心）

对于这个特定的符号，底部中心锚点的点大约是258,381

Demo: http://jsfiddle.net/a3LKP/5/ http://jsfiddle.net/a3LKP/5/

底部中心原点计算说明（对于 inkscape）。

假设您没有自己创建路径（符号），请使用给定路径创建一个 SVG 文档：

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

使用 inkscape 打开此文档。

首先去File->document-properties->page确定文档高度（对我来说是1052.36像素，我想这是默认的）

然后单击该符号将其选中，在菜单栏中您应该看到该对象的属性：X , Y , W(id), (H)eight.

对我来说现在是：
文档高度： 1052.36
对象-x： 130.909
对象-y： 671.362
对象宽度： 254.155
物体高度：286.093

计算底部的 y ：
从文档高度中减去对象 y（1052-671=381)

计算中心的 x ：
将对象宽度的一半添加到对象 x(131+(254/2)=258)

所以锚是new google.maps.Point(258,381)

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

googlemaps

googlemapsapi3

SVG

Google Maps API：缩放时 SVG 标记相对于地图移动 的相关文章