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

首先,我使用取点工具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. Swift 遍历数组元素

    ..<Array.count { Array[index] } for (index, element) in Array.enumerate() { print(("\(index+ ...

  2. 专题:mdadm Raid & LVM

    >FOR FREEDOM!< {A} Introduction Here's a short description of what is supported in the Linux R ...

  3. Apache+PHP配置运行环境(getenv的使用)

    在开发与上线等多个环境下,常量的配置一般不同,例如开发环境和生产环境的一些域名肯定不一样,为了保证代码上线就能运行,要求在代码运行开始的时候对不同的环境区分这些常规变量. 找到Apache目录下虚拟主 ...

  4. openssl,db,mysql,sasl编译安装

    yum -y install nfs-utils nfs4-acl-tools nfs-utils-libyum -y install gcc gcc* libtool libtools-ltdl l ...

  5. Javascript数组方法(译)

    在JavaScript中,数组可以使用Array构造函数来创建,或使用[]快速创建,这也是首选的方法.数组是继承自Object的原型,并且他对typeof没有特殊的返回值,他只返回'object'. ...

  6. 【07_226】Invert Binary Tree

    Invert Binary Tree Total Accepted: 54994 Total Submissions: 130742 Difficulty: Easy Invert a binary ...

  7. C++混合编程之idlcpp教程Lua篇(5)

    上一篇在这 C++混合编程之idlcpp教程Lua篇(4) 第一篇在这 C++混合编程之idlcpp教程(一) 与前面的工程相似,工程LuaTutorial3中,同样加入了三个文件:LuaTutori ...

  8. [Orchard] 通过指定RouteData设置Pager的链接地址

    Orchard 中的Pager是一个很方便的用来分页的Shape, 但默认情况下,它是使用当前Action的地址作为链接地址,如果分页的数据要是由别的Action提供时,这样的分页链接就不对了,其实它 ...

  9. 导入HDFS的数据到Hive

    1. 通过Hive view CREATE EXTERNAL TABLE if not exists finance.json_serde_optd_table ( retCode string, r ...

  10. ASP.NET MVC5 与EF6学习系列

    最近学习使用MVC5和EF6,博客园搜索了一番,写下这篇文章记录,以便学习使用. 一.ASP.NET MVC5 网站开发 @洞庭夕照写的博客系列 ASP.NET MVC5 网站开发实践 - 概述 AS ...