一些朋友在往地图上添加标注的时候，往往会发现，图片的尖尖角对不上具体的点。比如，我要在上海东方明珠上扎一个点。

首先，我使用取点工具http://lbs.amap.com/console/show/picker 拾取到东方明珠的经纬度，为121.499809,31.239666。

然后写一个自定义图片标注的代码，代码片段：

var marker = new AMap.Marker({ //添加自定义点标记

        map: map,

        position: [121.499809,31.239666], //基点位置

        offset: new AMap.Pixel(0, 0), //相对于基点的偏移位置

        draggable: true,  //是否可拖动

        content: '<img src="marker_3.png" />'   //自定义点标记覆盖物内容

    });

为了方便查看，我在标注图外面加了一个圈，可以看到，图片的左上角对准了基点位置。并不是图片的尖尖角啊喂！！

所以，我们需要设置offset，也就是偏移，来让标注的尖尖角对准东方明珠。图片的尺寸是128*128，我们先把偏移设置成-128,-128，意思是往左走，往上走。代码如下：

    var marker2 = new AMap.Marker({ //添加自定义点标记

        map: map,

        position: [121.499809,31.239666], //基点位置

        offset: new AMap.Pixel(-128, -128), //相对于基点的偏移位置

        draggable: true,  //是否可拖动

        content: '<img src="marker_3.png" />'   //自定义点标记覆盖物内容

    });

图片完美地跑到了上面！但是太靠左了，应该往右移一半呢。

所以把偏移设置成-64，-128。完整代码如下：

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

    <title>markerOffset</title>

    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>

    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=0250860ccb5953fa5d655e8acf40ebb7"></script>

</head>

<body>

<div id="container"></div>

<script type="text/javascript">

    var map = new AMap.Map("container", {

        resizeEnable: true,

        center: [121.499809,31.239666],//地图中心点

        zoom: 18 //地图显示的缩放级别

    });    

    var marker2 = new AMap.Marker({ //添加自定义点标记

        map: map,

        position: [121.499809,31.239666], //基点位置

        offset: new AMap.Pixel(-64, -128), //相对于基点的偏移位置

        draggable: true,  //是否可拖动

        content: '<img src="marker_3.png" />'   //自定义点标记覆盖物内容

    });

</script>

</body>

</html>

这样子，标注的尖尖角就完美地对准了东方明珠。如下图：

以上就是为什么以及如何给Marker设置offset洛~ 

如果大家还有疑问，可以给我提工单：http://lbs.amap.com/dev/ticket#/tickets

48小时内回复，还有机会免费得到教程详解。谢谢！

【高德地图API】如何设置Marker的offset？的更多相关文章

  1. 【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物

    原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...

  2. 高德地图API应用

    高德地图官网:http://api.amap.com/javascript/ 输入关键字,搜索地址功能的网页: 1.引用远程Map Api(js)网址形式(注册后获取) 2.定义个<div> ...

  3. 【高德地图API】如何解决坐标转换，坐标偏移？

    http://bbs.amap.com/thread-18617-1-1.html#rd?sukey=cbbc36a2500a2e6c2b0b19115118ace519002ff3a52731f13 ...

  4. 【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索

    原文:[高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公 ...

  5. 【高德地图API】如何打造十月妈咪品牌地图？

    原文:[高德地图API]如何打造十月妈咪品牌地图? 摘要:品牌地图除了地图,商铺标点外,还有微博关注,路线查询等功能. ---------------------------------------- ...

  6. 【高德地图API】汇润做爱地图技术大揭秘

    原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...

  7. 【高德地图API】从零开始学高德JS API（八）——地址解析与逆地址解析

    原文:[高德地图API]从零开始学高德JS API(八)——地址解析与逆地址解析 摘要:无论是百度LBS开放平台,还是高德LBS开放平台,其调用量最高的接口,必然是定位,其次就是地址解析了,又称为地理 ...

  8. 【高德地图API】从零开始学高德JS API（五）路线规划——驾车|公交|步行

    原文:[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3 ...

  9. 【高德地图API】从零开始学高德JS API（二）地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  10. 【高德地图API】从零开始学高德JS API（一）地图展现——仙剑地图，麻点图，街景，室内图

    原文:[高德地图API]从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图 摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于 ...

随机推荐

  1. Slave failed to initialize relay log info structure from the repository

    现象 查看slave 服务状态 show slave status\G; 错误 Last_Errno: 1872 Last_Error: Slave failed to initialize rela ...

  2. Web大规模高并发请求和抢购的解决方案

    电商的秒杀和抢购,对我们来说,都不是一个陌生的东西.然而,从技术的角度来说,这对于Web系统是一个巨大的考验.当一个Web系统,在一秒钟内收到数以万计甚至更多请求时,系统的优化和稳定至关重要.这次我们 ...

  3. css3之background-clip与background-origin的区别

    background-clip 规定背景的绘制区域. 3 background-origin 规定背景图片的定位区域. 3 background-size 规定背景图片的尺寸. 3 backgroun ...

  4. CodeIgnitor 创建admin和其他目录，前后端分离，很巧妙的方式，网上查找其他的都不是使用这种方式实现的。

    在index.php的第97和98行的注释, // The directory name, relative to the "controllers" folder. Leave ...

  5. 10. Software, Software Engineering， water fall (瀑布模型），Code Complete等名词的来源

    ①.Software-软件”一词是20世纪60年代才出现的,软件Software——1958年由贝尔实验室的著名统计学家John Tukey 提出软件与硬件一起构成完整的计算机系统,它们是相互依存,缺 ...

  6. ubuntu 14.04下 horizon openstack_dashboard 的开发环境搭建

    序:公司要在openstack的基础上,做开发做产品,网上资料也不是很多,很多都是在来回copy,在此做个blog,慢慢更新,推动自己进步. 首先老话题:开发环境的搭建.     一个纯净的ubunt ...

  7. error while loading shared libraries: xxx.so.x"错误的原因和解决办法

    http://blog.chinaunix.net/uid-26212859-id-3256667.html 参考博客 http://hi.baidu.com/newdreamllc/item/687 ...

  8. java基础知识分析： final ， finally，finalize

    final final-修饰符(关键字)如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父类被继承.因此一个类不能既被声明为 abstract的,又被声明为final的.将变量或方 ...

  9. 【Leetcode】【Hard】Insert Interval

    Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if necessa ...

  10. maven 打包 xml文件

    说起来手贱啊,搞了两个小时,就是因为打包的时候,maven无法把xml文件打包到正确的位置. 本来应该是打包到 com/presistence包下,结果打出来有两个包,一个是com/presisten ...