高德地图API 添加标点 自定义标点
在我们创建完地图实例后,就可以在地图中添加遮盖物,覆盖物有多种类型,今天只说点标记
首先构造一个点标记
添加默认样式点标记
// 构造点标记
var marker = new AMap.Marker({
position: [116.405467, 39.907761] // 点标记在地图上显示的位置,数组内对应经纬度
});
// 将点标记添加到地图map上
map.add(marker);
添加自定义样式点标记(注意:icon实例中的image请求本地会产生跨域问题,尽量请求线上的路径)
// 首先创建 AMap.Icon 实例:
var icon = new AMap.Icon({
size: new AMap.Size(40, 40), // 图标尺寸
//************ Icon路径 ************
image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量,适于雪碧图等
imageSize: new AMap.Size(40, 40), // 根据所设置的大小拉伸或压缩图片
});
// 将 Icon 实例添加到 marker 上:
var marker = new AMap.Marker({
position: new AMap.LngLat(116.465358, 39.958745),// icon在地图上显示的位置,数组内对应经纬度
offset: new AMap.Pixel(-18, -56),//设置icon在地上的偏移量
icon: icon, // 添加 Icon 实例
zoom: 13, //缩放等级
});
// 将点标记添加到地图map上
map.add(marker);