腾讯地图路线规划 vue

第一步在index.html引入链接

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY"></script>

第二步在main.js 全局引入

window.display_polyline = function (pl) {
    //创建 MultiPolyline显示折线
    var polylineLayer = new TMap.MultiPolyline({
        id: 'polyline-layer', //图层唯一标识
        map: map, //绘制到目标地图
        //折线样式定义
        styles: {
            style_blue: new TMap.PolylineStyle({
                color: '#3777FF', //线填充色
                width: 6, //折线宽度
                borderWidth: 5, //边线宽度
                borderColor: '#FFF', //边线颜色
                lineCap: 'round', //线端头方式
            }),
        },
        //折线数据定义
        geometries: [
            {
                id: 'pl_1', //折线唯一标识，删除时使用
                styleId: 'style_blue', //绑定样式名
                paths: pl,
            },
        ],
    });
};

window.cb = function (ret) {
    //从结果中取出路线坐标串
    var coors = ret.result.routes[0].polyline,
        pl = [];
    //坐标解压（返回的点串坐标，通过前向差分进行压缩，因此需要解压）
    var kr = 1000000;
    for (var i = 2; i < coors.length; i++) {
        coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
    }
    //将解压后的坐标生成LatLng数组
    for (var i = 0; i < coors.length; i += 2) {
        pl.push(new TMap.LatLng(coors[i], coors[i + 1]));
    }
    window.display_polyline(pl); //显示路线
};

第三步在页面中引入地图组件

 <div class="map">
                <div id="app"></div>
            </div>
 data() {
        return {
            path: [
                new TMap.LatLng(39.984039, 116.30763),//起点
                new TMap.LatLng(39.982266575222155, 116.30596876144409),
                new TMap.LatLng(39.977263, 116.337063),//终点
            ],
            a1: 39.984039,
            a2: 116.30763,
            b1: 39.977263,
            b2: 116.337063,
        };
    },

methods:{
  TencentMap() {
            var center = new TMap.LatLng(39.980619, 116.321277); //自己的定位纬度 经度
            window.map = new TMap.Map('app', {
                center: center, // 地图的中心地理坐标。
                zoom: 13, // 地地图缩放
                disableDefaultUI: true,
            });
            //WebServiceAPI请求URL（驾车路线规划默认会参考实时路况进行计算）
            var url = `https://apis.map.qq.com/ws/direction/v1/driving/?from=${this.a1},${this.a2}&to=${this.b1},${this.b2}&output=jsonp&callback=cb&key=你自己的Key`;
            //发起JSONP请求，获取路线规划结果
            this.jsonp_request(url);
            var marker = new TMap.MultiMarker({
                id: 'marker-layer',
                map: map,
                styles: {
                    start: new TMap.MarkerStyle({
                        width: 25,
                        height: 35,
                        anchor: { x: 16, y: 32 },
                        src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png',
                    }),
                    end: new TMap.MarkerStyle({
                        width: 25,
                        height: 35,
                        anchor: { x: 16, y: 32 },
                        src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png',
                    }),
                },
                geometries: [
                    {
                        id: 'start',
                        styleId: 'start',
                        position: new TMap.LatLng(this.a1, this.a2),
                    },
                    {
                        id: 'end',
                        styleId: 'end',
                        position: new TMap.LatLng(this.b1, this.b2),
                    },
                ],
            });
        },

        jsonp_request(url) {
            var script = document.createElement('script');
            script.src = url;
            document.body.appendChild(script);
        },

}