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

点标记Marker

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

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

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

// 创建一个 Marker 实例：let marker =newAMap.Marker({position:newAMap.LngLat(116.39,39.9),// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]title:'北京'});// 将创建的点标记添加到已有的地图实例：this.map.add(marker);// 移除已创建的 markerthis.map.remove(marker);-----------------------------------// 多个点实例组成的数组  或者使用循环函数添加var markerList =[marker, marker2, marker3];this.map.add(markerList);

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

// 创建 AMap.Icon 实例：var icon =newAMap.Icon({size:newAMap.Size(40,50),// 图标尺寸image:'//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png',// Icon的图像imageOffset:newAMap.Pixel(0,-60),// 图像相对展示区域的偏移量，适于雪碧图等imageSize:newAMap.Size(40,50)// 根据所设置的大小拉伸或压缩图片});// 将 Icon 实例添加到 marker 上:var marker =newAMap.Marker({position:newAMap.LngLat(116.405467,39.907761),offset:newAMap.Pixel(-10,-10),icon: icon,// 添加 Icon 实例 ，icon也可以是url链接// icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URLtitle:'北京',zoom:13});

map.add(marker);

new AMap.Marker({}) 参数说明

官方Marker说明文档

vue引入高德地图多种方法实现
vue高德地图初体验–地图初始化( 一 )
高德地图自定义图标的点标记Marker–初体验（二）

点个关注再走呗