如何用js调用高德API在地图上显示轨迹线
时间: 2024-05-15 14:18:10 浏览: 19
您可以使用以下步骤调用高德API在地图上显示轨迹线:
1. 引入高德API JavaScript库:在HTML页面上使用script标签引入高德API JavaScript库。
2. 创建地图:使用AMap.Map对象创建一个地图。
3. 获取轨迹数据:从服务器或本地获取轨迹数据并将其解析为经度和纬度坐标数组。
4. 创建轨迹线:使用AMap.Polyline对象创建一个轨迹线,并将坐标数组作为参数传递。
5. 将轨迹线添加到地图上:使用AMap.Map对象的addOverlay方法将轨迹线添加到地图上。
下面是一个使用高德API JavaScript库在地图上显示轨迹线的示例代码:
```javascript
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的高德地图API Key"></script>
<script type="text/javascript">
// 创建地图
var map = new AMap.Map('container', {
zoom: 12,
center: [116.39, 39.9]
});
// 获取轨迹数据
var data = [
[116.412384, 39.912103],
[116.411047, 39.912995],
[116.409383, 39.914071],
[116.407532, 39.915153],
[116.406130, 39.916081]
];
// 创建轨迹线
var polyline = new AMap.Polyline({
path: data,
strokeColor: "#3366FF",
strokeWeight: 5,
strokeOpacity: 1
});
// 将轨迹线添加到地图上
map.add(polyline);
</script>
```
请注意,您需要将“您申请的高德地图API Key”替换为您自己的API密钥才能使此示例代码正常工作。