1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > js/vue 高德地图绘制驾车路线图

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

时间:2021-01-07 20:24:03

相关推荐

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

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。