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

 wjyyd1129 发布于 2023-02-05 12:50

我在地图上创建了两个标记,一个是标准标记,另一个是SVG路径.当我缩小时,标准标记不会相对于地图移动,但SVG标记会移动.这是一个小提琴,你可以看到我的意思:

http://jsfiddle.net/9A4ET/

有关如何让SVG标记相对于地图保持其位置的任何想法?



    
    
    SVG Marker Moves
    
    
    

Dr.Molle.. 9

您必须为符号定义锚点(对于符号,默认值为左上角,而图像的默认值为底部中心)

对于该特定符号,底部中心锚点的点将是近似的 258,381

演示:http://jsfiddle.net/a3LKP/5/


底部中心原点计算说明(适用于inkscape).

假设您没有自己创建路径(符号),使用给定路径创建SVG文档:


  
    
  

使用inkscape打开此文档.

首先去File->document-properties->page确定文档高度(对我而言,它是1052.36px,我猜这是默认值)

然后单击符号将其选中,在菜单栏中您应该看到对象的属性:X,Y,W(宽度),(H)八.

对我来说现在是:
document-height: 1052.36
object-x: 130.909
object-y: 671.362
object-width: 254.155
object-height: 286.093

计算底部
的y:从文档高度减去object-y(1052-671 = 381)


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

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

1 个回答
  • 您必须为符号定义锚点(对于符号,默认值为左上角,而图像的默认值为底部中心)

    对于该特定符号,底部中心锚点的点将是近似的 258,381

    演示: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.36px,我猜这是默认值)

    然后单击符号将其选中,在菜单栏中您应该看到对象的属性:X,Y,W(宽度),(H)八.

    对我来说现在是:
    document-height: 1052.36
    object-x: 130.909
    object-y: 671.362
    object-width: 254.155
    object-height: 286.093

    计算底部
    的y:从文档高度减去object-y(1052-671 = 381)


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

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

    2023-02-05 12:54 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有