高德地图自定义图标的点标记Marker--初体验（二）

菜鸡的崛起

已于 2022-09-07 10:36:14 修改

阅读量1w

点赞数 5

分类专栏： vue 地图文章标签： javascript vue.js 前端

于 2022-07-29 15:37:14 首次发布

本文链接：https://blog.csdn.net/l_____z______z/article/details/126056189

版权

vue 同时被 2 个专栏收录

12 篇文章

订阅专栏

地图

3 篇文章

订阅专栏

本文详细介绍了如何在高德地图中创建默认图标和自定义图标的点标记Marker。首先，展示了创建默认图标点标记的步骤，包括实例化Marker、设置位置和标题，然后将其添加到地图中。接着，讲解了如何创建自定义图标，通过AMap.Icon设置图标尺寸、图像、偏移量，并将其应用到Marker上。最后，提供了 Marker 的关键参数说明，帮助理解其用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文以Marker为主，其他点标记方法大差不差

通过上两篇文章我们已经了解到如何引入高德地图并进行初始化了，本文主要讲解普通点标记Marker,Marker 类型推荐在数据量为 500 以内时使用。若数据量大于 500 ，推荐使用 LabelMarker海量点，

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

// 创建一个 Marker 实例：
let marker = new AMap.Marker({
    position: new AMap.LngLat(116.39, 39.9),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    title: '北京' 
});

// 将创建的点标记添加到已有的地图实例：
this.map.add(marker);

// 移除已创建的 marker
this.map.remove(marker);


-----------------------------------
// 多个点实例组成的数组  或者使用循环函数添加
var markerList = [marker, marker2, marker3];
this.map.add(markerList);

创建一个自定义图标的点标记:

// 创建 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 实例 ，icon也可以是url链接
    // icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
    title: '北京',
    zoom: 13
});

map.add(marker);