开发 地图 JS API 2.0 进阶教程 线 折线

折线 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();

2、本章涉及的属性及方法说明

2.1 AMap.Polyline

参数/方法

说明

类型 

参数值描述

默认值

center

折线的路径

Array<LngLat> 

经纬度对象或经纬度构成的一维数组

-

strokeWeight

描边的宽度

Number

-

2

strokeColor

轮廓线颜色

String

使用16进制颜色代码赋值

'#00D3FC'

lineJoin

折线拐点的绘制样式

String

可选值:'miter'尖角 |

'round'圆角 |

'bevel'斜角

'miter'

polyline.show()

显示折线

Function

-

-

polyline.hide()

隐藏折线

Function

-

-

返回顶部 示例中心 常见问题 智能客服 公众号
二维码