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

本节将向你介绍除了默认点标记之外的自定义图标类点标记和自定义内容的点标记。

准备

成为开发者并创建 key

为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击具体操作。

自定义图标和内容点标记

如需要自定义点标记内容，可以在创建 Marker 实例的时候，设置 icon 或者 content 参数来实现。

创建地图

const map = new AMap.Map('container',{
    zoom: 10,  //设置地图显示的缩放级别
    center: [116.397428, 39.90923],  //设置地图中心点坐标
    mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
    viewMode: '2D'  //设置地图模式
});

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

准备可访问的图标URL，设置icon属性既可展示自定义图标。

const 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);

为创建的 Marker 指定 Icon 实例

准备线上可访问icon图片，生成Icon实例。此种方式可以设置图标大小size，偏移imageOffset等属性，比单纯设置 URL 更加灵活。

// 创建 AMap.Icon 实例：
const 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 上:
const 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 指定自定义内容

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

const content = '<div class="marker-route marker-marker-bus-from"></div>';

const marker = new AMap.Marker({
    content: content,  // 自定义点标记覆盖物内容
    position:  [116.397428, 39.90923], // 基点位置
    offset: new AMap.Pixel(-17, -42) // 相对于基点的偏移位置
});

map.add(marker);