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

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 = newAMap.Driving({//驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式,还有其他几种方式见Api文档

policy: AMap.DrivingPolicy.LEAST_TIME

})//起、终点

var start_xy = newAMap.LngLat(that.Flng, that.Flat) // 起点的经纬度var end_xy = newAMap.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 = newAMap.Marker({

position: path[0],

icon:'https://webapi.amap.com/theme/v1.3/markers/n/start.png',

map: map

})var endMarker = newAMap.Marker({

position: path[path.length- 1],

icon:'https://webapi.amap.com/theme/v1.3/markers/n/end.png',

map: map

})var routeLine = newAMap.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])

}

}returnpath

}

}