折线

您所在的位置：网站首页 › js根据两个坐标画连接线 › 折线

折线

2024-05-22 01:41| 来源: 网络整理| 查看: 265

AMap.Polyline可以绘制绘制折线，本文介绍如何在地图上绘制折线，并设置宽度，描边颜色、线条样式等属性。

折线的绘制示例

亲手试一试

下载完整代码

1、绘制折线11.1 准备成为开发者并创建 key

为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击具体操作。

提示

你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。

21.2 创建地图const map = new AMap.Map("container", { zoom: 10, //地图级别 center: [116.397428, 39.90923], //地图中心点 mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式 viewMode: "2D", //地图模式 });

前往展示地图，了解完整地图创建

31.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), ];41.4 创建折线 Polyline 实例//创建 Polyline 实例 var polyline = new AMap.Polyline({ path: path, strokeWeight: 2, //线条宽度 strokeColor: "red", //线条颜色 lineJoin: "round", //折线拐点连接处样式 });51.5 将折线添加至地图实例map.add(polyline);提示折线的移除//移除一条已创建的折线 map.remove(polyline); //一次性移除多条已创建的折线 var polylines = [polyline1, polyline2, polyline3]; map.remove(polylines);折线的显示与隐藏//显示一条已创建的 polyline polyline.show(); //隐藏一条已创建的 polyline polyline.hide();

查看AMap.Polyline全部属性和方法

绘制大地线示例

自定义折线方向箭头示例

2、本章涉及的属性及方法说明2.1 AMap.Polyline

参数/方法

说明

类型

参数值描述

默认值

center

折线的路径

Array

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

strokeWeight

描边的宽度

Number

strokeColor

轮廓线颜色

String

使用16进制颜色代码赋值

'#00D3FC'

lineJoin

折线拐点的绘制样式

String

可选值：'miter'尖角 |

'round'圆角 |

'bevel'斜角

'miter'

polyline.show()

显示折线

Function

polyline.hide()

隐藏折线

Function

查看AMap.Polyline全部属性和方法

【本文地址】

折线

折线

今日新闻

推荐新闻