点标记Marker
创建一个默认图标的点标记:创建一个自定义图标的点标记:new AMap.Marker({}) 参数说明本文以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);// 移除已创建的 markerthis.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: '///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: '///icons/b18/1/2.png', // 添加 Icon 图标 URLtitle: '北京',zoom: 13});map.add(marker);
new AMap.Marker({}) 参数说明
官方Marker说明文档
vue引入高德地图多种方法实现
vue高德地图初体验–地图初始化( 一 )
高德地图自定义图标的点标记Marker–初体验(二)
点个关注再走呗