地图容器:
// 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: '/theme/v1.3/markers/n/start.png',map: map})var endMarker = new AMap.Marker({position: path[path.length - 1],icon: '/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}
}