高德地图路线图HTML
时间: 2023-08-26 10:06:21 浏览: 54
高德地图提供了 JavaScript API,可以在网页中嵌入地图,并自定义地图的样式和功能。其中,绘制路线图也非常简单,可以使用高德地图的 `AMap.Driving` 类实现。
以下是一个简单的 HTML 代码示例,用于绘制两个地点之间的驾车路线图:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高德地图路线图示例</title>
<!-- 引入高德地图 JavaScript API -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您的API密钥"></script>
<style>
#map {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<!-- 地图容器 -->
<div id="map"></div>
<script>
// 创建地图实例
var map = new AMap.Map('map', {
center: [116.397428, 39.90923], // 地图中心点
zoom: 13 // 地图缩放级别
});
// 创建驾车路线规划服务实例
var driving = new AMap.Driving({
policy: AMap.DrivingPolicy.LEAST_TIME // 路线规划策略:最短时间
});
// 根据起点和终点坐标,绘制驾车路线图
driving.search([
{keyword: '起点地址'},
{keyword: '终点地址'}
], function(status, result) {
if (status === 'complete' && result.info === 'OK') {
// 绘制路线图
var path = result.routes[0].path;
var polyline = new AMap.Polyline({
path: path,
isOutline: true,
outlineColor: '#ffeeee',
borderWeight: 2,
strokeColor: '#3366ff',
strokeOpacity: 0.7,
strokeWeight: 5
});
polyline.setMap(map);
// 调整地图视野,使路线图可见
map.setFitView(polyline);
} else {
alert('路线规划失败:' + result.info);
}
});
</script>
</body>
</html>
```
在上面的代码中,需要替换 `您的API密钥` 和 `起点地址`、`终点地址` 三个地方的内容。其中,API密钥可以在[高德开放平台](https://lbs.amap.com/)申请获得。