zoukankan      html  css  js  c++  java
  • 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 }
    }
  • 相关阅读:
    ....
    CodeForces 375A(同余)
    POJ 2377 Bad Cowtractors (最小生成树)
    POJ 1258 AgriNet (最小生成树)
    HDU 1016 Prime Ring Problem(全排列)
    HDU 4460 Friend Chains(bfs)
    POJ 2236 Wireless Network(并查集)
    POJ 2100 Graveyard Design(尺取)
    POJ 2110 Mountain Walking(二分/bfs)
    CodeForces 1059B Forgery(模拟)
  • 原文地址:https://www.cnblogs.com/leiting/p/9874905.html
Copyright © 2011-2022 走看看