Vue2-腾讯地图--路线规划

前端志茗

已于 2023-07-05 17:17:35 修改

阅读量939

点赞数

文章标签：前端 html javascript vue 前端框架

于 2023-04-19 22:08:24 首次发布

本文链接：https://blog.csdn.net/qq_56745273/article/details/130254622

版权

腾讯地图–路线规划

前期准备工作在腾讯地图–地图展示一文中即可查看

勿忘替换自己申请的key值

首先是创建utils文件夹，书写cb.js

/**
 * cb腾讯地图路线规划回调函数
 * @param {*} ret 
 */
export function cb(ret) {
   
    var coords = ret.result.routes[0].polyline,
    pl = [];
    //坐标解压（返回的点串坐标，通过前向差分进行压缩）
    var kr = 1000000;
    for (var i = 2; i < coords.length; i++) {
   
    coords[i] = Number(coords[i - 2]) + Number(coords[i]) / kr;
    }
    //将解压后的坐标放入点串数组pl中
    for (var n = 0; n < coords.length; n += 2) {
   
    pl.push(new window.TMap.LatLng(coords[n], coords[n + 1]));
    }
    display_polyline(pl); //显示路线
    //标记起终点marker
}

/**
 * display_polyline创建路线
 * @param {*} pl 
 */
export function display_polyline(pl){
   
    // console.log(pl);
    // // let color = ['rgba(0, 180, 0, 1)','rgba(255, 0, 0, 1)','rgba(204,153, 0, 1)','rgba(255, 0, 0, 1)','rgba(204,153, 0, 1)','rgba(0, 180, 0, 1)']
    // let geo = []
    // pl.forEach(item=>{
   
    //     var obj = {
   
    //         path: [item.lat,item.lng]
    //     }
    //     geo.push(obj)
    // })
    // var newGeo = []
    // geo.forEach(list=>{
   
    //     var obj = {
   
    //         path: list,
    //         color: 'rgba(0, 180, 0, 1)'
    //     }
    //     newGeo.push(obj)
    // })
    // console.log(newGeo);
    //创建 MultiPolyline显示折线
    new