折线 Polyline 最后更新时间: 2023年03月23日
AMap.Polyline 对象为用户提供在地图图面绘制折线的能力。
提示
可以为折线设置宽度,描边颜色、线条样式等属性。
准备
成为开发者并创建 key
为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作。
折线 Polyline
创建方式如下:
1
创建地图
const map = new AMap.Map('container',{
zoom: 10, //设置地图显示的缩放级别
center: [116.397428, 39.90923], //设置地图中心点坐标
mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
viewMode: '2D' //设置地图模式
});
2
折线的节点坐标数组
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.904600)
];
3
创建折线实例
var polyline = new AMap.Polyline({
path: path,
borderWeight: 2, // 线条宽度,默认为 1
strokeColor: 'red', // 线条颜色
lineJoin: 'round' // 折线拐点连接处样式
});
4
将折线添加至地图实例
map.add(polyline);
提示
- 折线的移除
// 移除一条已创建的折线
map.remove(polyline);
// 一次性移除多条已创建的折线
var polylines = [polyline1, polyline2, polyline3];
map.remove(polylines);
- 折线的显示与隐藏
// 显示一条已创建的 polyline
polyline.show();
// 隐藏一条已创建的 polyline
polyline.hide();