高德(百度)地图驾车路线规划和清除

本文详细介绍了如何使用高德地图和百度地图API进行路线规划,包括带途径点的路径规划、路线颜色自定义、起点终点图标设置及路线清除等操作。
高德地图:
  1. 带途径点的路径规划:
var markerList=[
	{
         lng:116.379028,
         lat:39.865042
    },
    {
         lng:116.379028,
         lat:39.885042,          
    },
    {
         lng:116.379028,
         lat:39.915042,         
    }
];

//加载路径规划插件
AMap.plugin('AMap.Driving', function() {
     var driving = new AMap.Driving({
         map: map,
    });

    //拼接途径点
    var waypoints=[];
    for(var i=1;i<markerList.length;i++){
        waypoints.push(new AMap.LngLat(markerList[i].lng,markerList[i].lat))
    }

    //绘制路线
    //起点和终点是同一个位置
    driving.search(new AMap.LngLat(markerList[0].lng,markerList[0].lat),new AMap.LngLat(markerList[0].lng,markerList[0].lat),{waypoints: waypoints}, function(status, result) {
         if (status === 'complete') {
              //保证所有覆盖物都在视野范围内
              map.setFitView();
         } else {
              alert('路线绘制失败!');
         }
    });
})
  1. 清除路线规划:
在 Vue2 中实现高德地图路线规划功能,需要结合高德地图的 JavaScript API 来完成地图初始化、路线绘制以及交互操作。以下是一个完整的页面代码示例,包含地图初始化、驾车路线规划请求与轨迹绘制的逻辑。 ### ### 完整 Vue2 页面代码 ```html <template> <div id="app"> <div id="container" style="width: 100%; height: 100vh;"></div> <button @click="getDrivingRoute">获取驾车路线</button> </div> </template> <script> export default { name: 'App', data() { return { map: null, driving: null, pathSimplifierIns: null, routeActive: { value: 0 }, }; }, mounted() { this.initMap(); }, methods: { initMap() { // 初始化地图 this.map = new AMap.Map('container', { zoom: 13, center: [116.397428, 39.90923], }); // 初始化路径规划插件 AMap.plugin(['AMap.Driving'], () => { this.driving = new AMap.Driving({ map: this.map, panel: 'panel', }); }); }, getDrivingRoute() { const origin = [116.397428, 39.90923]; // 起点坐标(北京) const destination = [116.427281, 39.903751]; // 终点坐标(北京) if (this.driving) { this.driving.search(origin, destination, (status, result) => { if (status === 'complete') { this.onDrivingPathRender(result); } else { console.error('路线规划失败:', result); } }); } }, onDrivingPathRender(data) { let routes = data.routes || []; let route = routes[this.routeActive.value] || {}; let steps = route.steps || []; let pathList = []; steps.forEach((item, index) => { let beforePath = null; if (index > 0) { let beforeData = steps[index - 1]; beforePath = beforeData.path[beforeData.path.length - 1]; } let pathItem = [...item.path]; if (beforePath) { pathItem.unshift(beforePath); } pathList.push(...pathItem); }); this.map.setFeatures(['bg', 'point']); this.map.setMapStyle('amap://styles/whitesmoke'); // 清除已有路线 if (this.pathSimplifierIns) { this.map.remove(this.pathSimplifierIns); } this.pathSimplifierIns = new AMap.Polyline({ path: pathList, strokeColor: '#FF33FF', strokeWeight: 5, strokeOpacity: 1, strokeLineCap: 'round', strokeStyle: 'solid', strokeDasharray: [10, 5], }); this.map.add(this.pathSimplifierIns); this.map.setFitView(); // 自动调整视野 }, }, }; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 10px; } </style> ``` ### ### 使用说明 1. **引入高德地图 API** 在 `public/index.html` 中添加高德地图 SDK 的引用: ```html <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的高德地图Key"></script> ``` 2. **替换地图 Key** 将 `src` 中的 `你的高德地图Key` 替换为你在高德开放平台申请的 Web 端 Key。 3. **运行项目** 启动 Vue 项目后,在地图中点击“获取驾车路线”按钮即可发起路线规划,并在地图上绘制出完整的路线轨迹。 ###
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值