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

腾讯地图–路线规划

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

勿忘替换自己申请的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 window.TMap.MultiPolyline({
        id: 'polyline-layer', //图层唯一标识
        map: window.map,// 绘制到目标地图
        //折线样式定义
        styles: {
            'style_blue': new window.TMap.PolylineStyle({
                color: '#3777FF', //线填充色
                width: 8, //折线宽度
                borderWidth: 3, //边线宽度
                borderColor: '#FFF', //边线颜色
                lineCap: 'round', //线端头方式
                showArrow: true,  // 显示箭头
                arrowOptions:{
                    width: 6,
                    height: 10,
                    space: 20,
                }
            }),
            // 彩虹线
            'caihong':new window.TMap.PolylineStyle({
                color: '#3777FF', //线填充色
                width: 8, //折线宽度
                borderWidth: 3, //边线宽度
                showArrow: true,
                arrowOptions: {
                    width: 6,
                    height: 10,
                    space: 70
                },
                lineCap: 'round',
            }),
        },
        //折线数据定义
        geometries: [
            {
                id: 'pl_1', // 折线唯一标识，删除时使用
                styleId: 'style_blue',  // 绑定样式名
                // styleId: 'caihong', 
                paths: pl,
                // rainbowPaths: newGeo,  // 彩虹线数组
            }
        ]
    });
}

在main.js中引用

// 引入腾讯地图路线规划
import { cb } from './utils/cb';
window.cb = cb
import { display_polyline } from './utils/cb';
window.display_polyline = display_polyline

然后组件中使用

<template>
  <div class="container">
    <el-button type="primary" @click="init">开始规划路线</el-button>
    <!-- 地图容器 -->
    <div id="map-routerPlanning"></div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            map: null
        }
    },
    mounted(){
        this.initMap()
    },
    methods:{
        initMap(){
            window.map = new window.TMap.Map(document.getElementById('map-routerPlanning'),{
                center: new window.TMap.LatLng(39.980619,116.321277), // 地图显示中心点
                zoom: 15,
                pitch: 43.5,
                rotation: 45
            }) 
        },
        // 浏览器调用WebServiceAPI需要通过Jsonp的方式，此处定义了发送JOSNP请求的函数
        jsonp_request(url) {
            var script = document.createElement("script");
            script.src = url;
            document.body.appendChild(script);
        },
        init(){
            // WebServiceAPI请求URL（驾车路线规划默认会参考实时路况进行计算）
            var url="https://apis.map.qq.com/ws/direction/v1/driving/"; //请求路径
            url+="?from=39.984039,116.307630";  // 起点坐标
            url+="&to=39.977263,116.337063";  // 终点坐标
            url+="&output=jsonp&callback=cb" ;  // 指定JSONP回调函数名
            url+="&key=自己申请的key值";  // 自己申请的key值

            this.jsonp_request(url);
            new window.TMap.MultiMarker({
                id: "marker-layer",
                map:  window.map,
                styles: {
                    'start': new window.TMap.MarkerStyle({
                        width: 25,
                        height: 35,
                        anchor: { 'x': 16, 'y': 32 },
                        // 图片导入不可直接导入, 需要使用require赋值
                        src:require('../../assets/tengxun/起点.png'),
                    }),
                    'end': new window.TMap.MarkerStyle({
                        width: 25,
                        height: 35,
                        anchor: { 'x': 16, 'y': 32 },
                        src: require('../../assets/tengxun/终点.png'),
                    }),
                },
                geometries: [
                    {
                        id: "start",
                        styleId: 'start',  // 绑定样式
                        position: new window.TMap.LatLng(39.984039,116.307630),
                    },
                    {
                        id: "end",
                        styleId: 'end',
                        position: new window.TMap.LatLng(39.977263,116.337063),
                    },
                ],
            });
        }
    }
}
</script>

<style lang="less" scoped>

</style>

素材照片：

运行展示：