折线 Polyline 最后更新时间: 2024年03月15日
AMap.Polyline可以绘制绘制折线，本文介绍如何在地图上绘制折线，并设置宽度，描边颜色、线条样式等属性。
折线的绘制示例
1、绘制折线
1
1.1 准备
成为开发者并创建 key
为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击 具体操作。
提示
你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。
2
1.2 创建地图
const map = new AMap.Map("container", {
zoom: 10, //地图级别
center: [116.397428, 39.90923], //地图中心点
mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
viewMode: "2D", //地图模式
});3
1.3 折线的节点坐标数组
提示
如果不知道如何确认经纬度可前往 拾取坐标
//配置折线路径
var path = [
new AMap.LngLat(116.368904, 39.913423),
new AMap.LngLat(116.382122, 39.901176),
new AMap.LngLat(116.387271, 39.912501),
new AMap.LngLat(116.398258, 39.9046),
];4
1.4 创建折线 Polyline 实例
//创建 Polyline 实例
var polyline = new AMap.Polyline({
path: path,
strokeWeight: 2, //线条宽度
strokeColor: "red", //线条颜色
lineJoin: "round", //折线拐点连接处样式
});5
1.5 将折线添加至地图实例
map.add(polyline);提示
- 折线的移除
//移除一条已创建的折线
map.remove(polyline);
//一次性移除多条已创建的折线
var polylines = [polyline1, polyline2, polyline3];
map.remove(polylines);- 折线的显示与隐藏
//显示一条已创建的 polyline
polyline.show();
//隐藏一条已创建的 polyline
polyline.hide();