js/vue 高德地图绘制驾车路线图

时间:2024-03-06 19:24:15

地图容器:

// css要给此容器设置宽高
<div class="map_container"></div>

画图

data{
return {
Clng:"120.267842",
Clat:"30.19439",
  Flng:"120.267417907715",
  Flat:"30.19460105896",
  Tlng:"120.269302368164",
Tlat:"30.2087898254395"
}
},
mounted(){
  this.drawMap();
},
methods:{

drawMap() { // 专车--画地图 let that = this; var map = new AMap.Map(\'map_container\', { resizeEnable: true, zoom:14, center: [that.Clng, that.Clat] // 地图中心点的经纬度 }); AMap.plugin(\'AMap.Driving\', function() { var driving = new AMap.Driving({ // 驾车路线规划策略,AMap.DrivingPolicy.LEAST_TIME是最快捷模式,还有其他几种方式见Api文档 policy: AMap.DrivingPolicy.LEAST_TIME }) //起、终点 var start_xy = new AMap.LngLat(that.Flng, that.Flat) // 起点的经纬度 var end_xy = new AMap.LngLat(that.Tlng, that.Tlat) // 终点的经纬度 // 根据起终点经纬度规划驾车导航路线 driving.search(start_xy, end_xy, function(status, result) { if (status === \'complete\') { if (result.routes && result.routes.length) { console.log(result.routes[0]); // 绘制第一条路线,也可以按需求绘制其它几条路线 var path = that.parseRouteToPath(result.routes[0]) var startMarker = new AMap.Marker({ position: path[0], icon: \'https://webapi.amap.com/theme/v1.3/markers/n/start.png\', map: map }) var endMarker = new AMap.Marker({ position: path[path.length - 1], icon: \'https://webapi.amap.com/theme/v1.3/markers/n/end.png\', map: map }) var routeLine = new AMap.Polyline({ path: path, isOutline: true, outlineColor: \'#ffeeee\', borderWeight: 2, strokeWeight: 5, strokeColor: \'#0091ff\', lineJoin: \'round\' }) routeLine.setMap(map) // 调整视野达到最佳显示区域 map.setFitView([ startMarker, endMarker, routeLine ]) console.log(\'绘制驾车路线完成\') } } else { console.log(\'获取驾车数据失败:\' + result) } }); }) }, parseRouteToPath(route) { var path = [] for (var i = 0, l = route.steps.length; i < l; i++) { var step = route.steps[i] for (var j = 0, n = step.path.length; j < n; j++) { path.push(step.path[j]) } } return path }
}