高德地图内置了许多遮盖物的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>
<meta
name="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>
<script
language="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>