开发 地图 JS API 1.4 教程 覆盖物 点标记

点标记 最后更新时间: 2023年05月15日


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

  1.  点标记 Marker
  2.  灵活点标记 ElasticMarker
  3.  圆形标记 CircleMarker
  4.  文本标记 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 = '<div class="marker-route marker-marker-bus-from"></div>';

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 等多种事件。点标记事件的添加和移除和支持的所有事件类型,可参见 「地图和覆盖物事件」。




返回顶部 示例中心 常见问题 智能客服 公众号
二维码