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

地图容器:

// 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 }
}

 

posted @ 2018-10-30 09:30  c-137Summer  阅读(6500)  评论(0编辑  收藏  举报