【高德地图入门】--- 绘制线

高德地图内置了许多遮盖物的api，今天主要就是讲解线的绘制方法

创建地图

为了更好的展示线的绘制，我们需要先创建一个地图对象

<body><div id="container"></div>
</body>

     const map = window.map = new AMap.Map("container", {center: [116.381674, 39.910732],viewMode: "3D",zoom: 8,});

面的类型

高德地图提供了多种线的绘制类型，其中包括折线Polyline，贝瑟尔曲线BezierCurve等

Polyline类

 new AMap.Polyline({map,path: [[115.657355, 39.889531],[115.962309, 39.902048],[115.971514, 39.751649],],});

Polyline的两个主要属性

map：要显示该marker的地图对象
path：折线的节点坐标数组，按数组顺序将坐标相连

当然 Polyline还有其他属性，可以修改折线的样式

BezierCurve类

    const path = [//每个弧线段有两种描述方式[115.034852, 39.772587], //起点[115.458558, 39.575749, 115.706729, 39.209713, 116.460321, 39.254254],[117.079306, 39.479608, 117.738486, 39.906518],];var bezierCurve = new AMap.BezierCurve({path: path,map,});

Polyline的两个主要属性

map：要显示该marker的地图对象
path：折线的节点坐标数组，每一个元素表示一个弧线段，并组成一个完整的曲线，注意每一个元素里面最多三组坐标

更多属性

全部代码展示（其中xxxx 高德的秘钥，cccc是高德的key，需要自己申请）

<!DOCTYPE html>
<html><head><metaname="viewport"content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>map</title><style>body,html,#container {margin: 0;width: 100%;height: 100%;}</style></head><body><div id="container"></div></body><script>window._AMapSecurityConfig = {securityJsCode: "xxxx",};</script><scriptlanguage="javascript"src="https://webapi.amap.com/maps?v=1.4.15&key=cccc"></script><script language="javascript">const map = (window.map = new AMap.Map("container", {center: [116.381674, 39.910732],viewMode: "3D",zoom: 8,showLabel: false,}));//--------------------------------------Polyline--------------------------------------new AMap.Polyline({map,path: [[115.657355, 39.889531],[115.962309, 39.902048],[115.971514, 39.751649],],});//--------------------------------------BezierCurve--------------------------------------const path = [//每个弧线段有两种描述方式[115.034852, 39.772587,115.22811,39.716637,], //起点[115.458558, 39.575749, 115.706729, 39.209713, 116.460321, 39.254254],[117.079306, 39.479608, 117.738486, 39.906518],];var bezierCurve = new AMap.BezierCurve({path: path,map,});</script>
</html>

【高德地图入门】--- 绘制线相关推荐

vue使用高德地图并且绘制多边形
使用鼠标工具在高德地图上绘制多边形时需要使用到一个插件,如果直接new出该工具会提示该工具不是一个函数之类的错误,在使用之前需要先告诉vue,你所是使用的是一个插件 AMap.plugin([&quo ...
java实现高德地图app,Android 高德地图入门demo，最新高德地图实现方法，附源码及apk...
[实例简介] Android 高德地图入门demo,最新高德地图实现方法,附源码及apk [实例截图] [核心代码] GaoDeDemo ├── GaoDeDemo │ ├── app │ │ ...
JavaScript高德地图中绘制echarts图表随地图移动
JavaScript高德地图中绘制echarts图表随地图移动** 先上效果图实现方法如下: 使用高德地图"信息窗体",信息窗体AMap.InfoWindow的属性content ...
高德地图限制绘制区域
高德地图在绘制过程中没有提供监听过程的Api:制造错误来进行中断绘制 // 创建地图createMap() {let self = this;self.center = [self.gpsAll[0] ...
高德地图web绘制省、市、区边界线和面积图
高德地图web绘制省.市.区边界线和面积图高德地图官方API 图例总结要点申请高德地图的key 用于后边web调用高德地图key申请引用 <script type="tex ...
【高德地图入门】--- 绘制点
高德地图内置了许多遮盖物的api,今天主要就是讲解常用的点,线,面的绘制方法点的绘制相对简单,只需要一个坐标值即可,例: [ 116.396783,39.894813 ] 创建地图为了更好的展示点 ...
【高德地图入门】--- 绘制面
高德地图内置了许多遮盖物的api,今天主要就是讲解面的绘制方法创建地图为了更好的展示面的绘制,我们需要先创建一个地图对象 <body><div id="containe ...
高德地图:弧度飞线图层详解
实现弧度飞线图层需要地图JS API 和 LOCA数据可视化API 组合实现. 概述-地图 JS API v2.0 | 高德地图API (amap.com) 概述-LOCA 数据可视化 API 2. ...
高德地图实现画线搜索
今天分享一下,使用高德地图api实现上图可自由画线的效果. 查看高德官方文档会发现,并没有可自主画图,文档提供的矢量图功能有: AMap.Polyline 构造折线 AMap.BezierCurve ...

【高德地图入门】--- 绘制线

创建地图

面的类型

【高德地图入门】--- 绘制线相关推荐

最新文章

热门文章