点标记是用来标示某个位置点信息的一种地图要素,本章介绍如何在地图图面使用点标记,分别包括:点标记 Marker

灵活点标记 ElasticMarker

圆形标记 CircleMarker

文本标记 Text

点标记 Marker

一.  创建一个默认图标的点标记:

// 创建一个 Marker 实例:

var marker = new AMap.Marker({

position: new AMap.LngLat(116.39, 39.9), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]

title: '北京'

});

// 将创建的点标记添加到已有的地图实例:

map.add(marker);

// 移除已创建的 marker

map.remove(marker);

也可以一次添加多个点标记到地图实例(其它覆盖物均可使用此方式):

// 多个点实例组成的数组

var markerList = [marker1, marker2, marker3];

map.add(markerList);

二. 自定义图标标记

如需要自定义点标记内容,可以在创建 Marker 实例的时候,设置 icon 参数来实现。具体可通过以下两种方式:

1. 为创建的 Marker 指定自定义图标 URL :

var marker = new AMap.Marker({

position: new AMap.LngLat(116.39,39.9),

offset: new AMap.Pixel(-10, -10),

icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL

title: '北京'

});

map.add(marker);

2. 为创建的 Marker 指定 Icon 实例。此种方式可以设置图标大小,偏移等属性,比单纯设置 URL 更加灵活。创建方式如下

// 创建 AMap.Icon 实例:

var icon = new AMap.Icon({

size: new AMap.Size(40, 50), // 图标尺寸

image: '//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png', // Icon的图像

imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量,适于雪碧图等

imageSize: new AMap.Size(40, 50) // 根据所设置的大小拉伸或压缩图片

});

// 将 Icon 实例添加到 marker 上:

var marker = new AMap.Marker({

position: new AMap.LngLat(116.405467, 39.907761),

offset: new AMap.Pixel(-10, -10),

icon: icon, // 添加 Icon 实例

title: '北京',

zoom: 13

});

map.add(marker);

或者向已创建好的 Marker 添加 Icon:

marker.setIcon(icon);

三. 自定义内容标记

对于更加复杂的 marker 展示,我们可以使用 Marker类 的 content 属性。content 属性取值为用户自定义的 DOM 节点或者 DOM 节点的 HTML 片段。content 属性比 icon 属性更加灵活,设置了 content 以后会覆盖 icon 属性。具体实例如下:

var content = '

var marker = new AMap.Marker({

content: content, // 自定义点标记覆盖物内容

position: [116.397428, 39.90923], // 基点位置

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

});

map.add(marker);

四. 自定义点标记的锚点位置

如果用户自定义点标记内容,无论是自定义 Icon 还是 自定义内容,都需要为定义的图片重新设置锚点位置。设置方法如下:

1.设置 anchor (自 v1.4.13 新增属性)

通过 anchor 可以方便的设置锚点方位。anchor 可选值有  'top-left'、'top-center'、'top-right'、'middle-left'、'center'、'middle-right'、'bottom-left'、'bottom-center'、'bottom-right' , 分别代表了点标记锚点的不同方位。

var marker = new AMap.Marker({

icon: '//a.amap.com/jsapi_demos/static/demo-center/marker/marker-bottom-left.png', // 自定义点标记

position: [116.418481,39.90833], // 基点位置

offset: new AMap.Pixel(0,0), // 设置点标记偏移量

anchor:'bottom-left', // 设置锚点方位

});

map.add(marker);

2.设置 offset

通过设置 offset 来添加偏移量。当偏移量为 (0, 0) 时,自定义内容默认以左上角为基准点(若设置了 anchor,基准点位置则为 anchor 设置的位置)与经纬度坐标对齐;设置 offset 为其他值则对齐位置相应改变。具体偏移规则如下:

灵活点标记 ElasticMarker

灵活点标记是可随地图级别变化而改变图标和大小的点标记。可满足用户在地图缩放到不同级别有不同展示效果的需求。

圆形标记 CircleMarker

构造一个圆形覆盖物,v1.4.3版本新增类。可直接满足创建圆形标注的需要。

AMap.CircleMarker 类与下一章介绍到的 AMap.Circle 类均为在地图上绘制圆形覆盖物的方法。这两类的根本不同在于 AMap.Circle 为矢量图形类,随地图的缩放会改变大小;而 AMap.CircleMarker 类则不会随图面缩放而改变。

文本标记 Text

纯文本标记,v1.4.2版本新增类。文本标记的展示内容为纯文本。继承自 Marker 类,具有 Marker 的大部分属性、方法和事件。

点标记事件

点标记支持 click, mouseover 等多种事件。点标记事件的添加和移除和支持的所有事件类型,可参见 「地图和覆盖物事件」。

js添加多marker 高德地图_点标记-覆盖物-教程-地图 JS API | 高德地图API相关推荐

  1. 高德地图的标志放大_点标记-覆盖物-教程-地图 JS API | 高德地图API

    点标记是用来标示某个位置点信息的一种地图要素,本章介绍如何在地图图面使用点标记,分别包括:点标记 Marker 灵活点标记 ElasticMarker 圆形标记 CircleMarker 文本标记 T ...

  2. 高德地图怎么画圈_点标记-覆盖物-教程-地图 JS API | 高德地图API

    点标记是用来标示某个位置点信息的一种地图要素,本章介绍如何在地图图面使用点标记,分别包括:点标记 Marker 灵活点标记 ElasticMarker 圆形标记 CircleMarker 文本标记 T ...

  3. js添加多marker 高德地图_覆盖物-参考手册-地图 JS API | 高德地图API

    覆盖物 覆盖物是指叠加在地图底图之上的一些常见要素,包括 Marker类 点标记. 构造函数 说明 AMap.Marker( 构造一个点标记对象,通过MarkerOptions设置点标记对象的属性 M ...

  4. js添加多marker 高德地图_【高德地图API】从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物...

    摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在一张地图上,除了底层的底图(瓦片图,矢量图),控件(有功能可操作的工具),最重要最不可缺少的就是覆盖物了.覆盖物有多种,包括,标注.折 ...

  5. js添加多marker 高德地图_web开发如何使用高德地图API(四)通过AMap.Marker自定义标点...

    说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 准备工作: 首先,注册开发者账号,成为高德开放平台开发者 ...

  6. js添加多marker 高德地图_高德地图点聚合--Marker多点聚合及多个marker点击事件

    本篇文章主要是高德地图的多点聚合,及多个marker点击事件 以下为简单的模拟数据 soogif (1).gif image.png 具体代码如下 点聚合 html, body, #container ...

  7. js添加多marker 高德地图_h5高德地图javascript调起app导航定位多个marker

    最近做的一个项目, 一开始以为是做路线规划, 后来说是做导航 记录下代码 // 获取商品集合集合并且传回来的是名称和经纬度 getShop : function(){ $.ajax({         ...

  8. react 使用 leaflet 百度地图_【React】react项目中应用百度地图添加起始点绘制路线...

    如图:项目中百度地图的应用添加起始点.终点并绘制路线 在展示代码的时候首先展示一下后台返回给我的接口 { 其中position_list参数代表的是用户的行驶点, area参数代表的是服务区的坐标点, ...

  9. 嵌入地图跳转高德地图_根据输入的地址跳转到百度地图或者高德地图进行路线导航...

    写在前面: 尽管精确度已然调至最佳, 但还是会有一定程度的定位误差, 作为开发者我已然尽力, 只能希望apple官方做些优化吧 输入目的地地址时最好填入区, 不然有时会定位不到 http://deve ...

最新文章

  1. 深入浅出WPF——x:Class详解
  2. #软件配置管理#之坏味道搜集
  3. [WorldWind学习]18.High-Performance Timer in C#
  4. java 12错误_Java异常处理的12条军规总结
  5. C语言——找出矩阵最大值
  6. jQuery框架学习第五天:事件与事件对象
  7. u盘efi安装linux6.5,CentOS6.5安装的UEFI-GPT回退为MBR引导详解
  8. error: (-215:Assertion failed) !ssize.empty() in function 'cv::resize'产生原因
  9. 安装matplotlib时,报错Command “python setup.py egg_info“ failed with error code 1 in /tmp/pip-build-gvyzl2
  10. 如何共享计算机磁盘,扩展群集共享磁盘的分区 - Windows Server | Microsoft Docs
  11. VC6.0代码移植到VS2008运行时乱码问题解决
  12. springboot拦截器无法获取token值的问题
  13. iOS字体大小适配的几种方法
  14. STM32 printf 输出到usart1
  15. Oracle查看ogg延时,OGG复制进程延迟不断增长
  16. 极值点、驻点、鞍点、拐点
  17. 正向代理与反向代理通俗版解释
  18. [分享]蓝屏代码查询及代码分析
  19. 常用电源管理稳压IC
  20. 无人驾驶或成为共享汽车真正的救星?

热门文章

  1. 培训人要转型?先回答这6个问题
  2. BITMAP CONVERSION FROM ROWIDS
  3. SourceTree解决冲突的三种情形
  4. httpCanary app抓包
  5. 亚马逊16条领导力原则
  6. 自动化测试——多窗口切换和切换frame
  7. C#如何实现多窗口切换
  8. 大炮打蚊子 (15 分)(二维数组训练)
  9. 如何将本地代码同步到Gitee(码云)
  10. 搜索引擎有“破绽” seo可趁虚而入