腾讯地图路线规划 vue

StriplingLee

已于 2022-03-24 15:53:50 修改

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：腾讯地图路线规划文章标签：前端 vue.js 微信小程序

于 2022-03-24 15:52:21 首次发布

本文链接：https://blog.youkuaiyun.com/StriplingLee/article/details/123713037

第一步在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