实验描述
本次实验使用了高德地图API轨迹的绘制。
通过点击路线1按钮即可显示轨迹:
点击路线2按钮即可显示另一条轨迹:
讲解
参考视频:讲解视频
参考代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高德地图API绘制轨迹</title>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: '【您的秘钥】'}
</script>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=【您的key】&plugin=AMap.Driving,AMap.Walking"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<style type="text/css">
html,
body,
#container {
width: 99.99%;
height: 98%;
}
.btn {
/* 按钮美化 */
width: 100px;
/* 宽度 */
height: 30px;
/* 高度 */
border-width: 0px;
/* 边框宽度 */
border-radius: 5px;
/* 边框半径 */
background: #1E90FF;
/* 背景颜色 */
cursor: pointer;
/* 鼠标移入按钮范围时出现手势 */
outline: none;
/* 不显示轮廓线 */
font-family: Microsoft YaHei;
/* 设置字体 */
color: white;
/* 字体颜色 */
font-size: 17px;
/* 字体大小 */
}
.btn:hover {
/* 鼠标移入按钮范围时改变颜色 */
background: #5599FF;
}
</style>
<script>
// 轨迹1的途经点数据
people01 = [
[103.637195, 36.08536],
[103.725881, 36.107875],
[103.738439, 36.09808],
[103.859546, 36.046674]
]
// 轨迹2的途经点数据
people02 = [
[103.66207, 36.087118],
[103.697089, 36.099151],
[103.727215, 36.082922],
[103.752309, 36.068972],
[103.816907, 36.0594]
]
</script>
</head>
<body>
<input class="btn" type="button" value="路线1" onclick="loadMap(people01)">
<input class="btn" type="button" value="路线2" onclick="loadMap(people02)">
<div id="container"></div>
<script>
//AMap.Map( , )的第一个参数是对应的容器,第二个参数是设置地图参数的对象
var map = new AMap.Map('container', {
zoom: 13, //设置地图显示的缩放级别
center: [103.737026, 36.108024],//设置地图中心点坐标,
});
function loadMap(people) {
var map = new AMap.Map('container', {
zoom: 13, //设置地图显示的缩放级别
center: [103.737026, 36.108024],//设置地图中心点坐标,西北师范大学新校区
});
//返回经纬度对象
function convertToLatLng(LatLng) {
return new AMap.LngLat(LatLng[0], LatLng[1])
}
var waypointArray = []
for (var i = 1; i < people.length - 1; i++) {
waypointArray.push(convertToLatLng(people[i]))
}
console.log(waypointArray)
var driving = new AMap.Driving({
map: map,
//hideMarkers:true,//显示起终点
showTraffic: false,
}).search(convertToLatLng(people[0]), convertToLatLng(people[people.length - 1]),
//{waypoints:[c2b(day[1]),c2b(day[2])]})//途经点最多6个
{
waypoints: waypointArray
})
}
</script>
</body>
</html>