微信小程序-路线规划功能

wxml

<view class="container">
  <view class="mapTop">
    <van-tabs active="{{ active }}" color="#2A82E4" bind:change="onChange">
      <view wx:for="{{scenicList}}" wx:key="id">
        <van-tab title="{{item.name}}" />
      </view>
    </van-tabs>

    <!-- 显示地图 -->
    <view class="view" style="position: absolute;width: 100%;height: 80%;bottom: 20%">
      <map id="myMap" 
           style="width: 100%; height: 100vh;" 
           longitude="{{longitude}}" 
           latitude="{{latitude}}" 
           scale="16" 
           polyline="{{polyline}}" 
           show-location="true" 
           markers="{{markers}}">
      </map>
    </view>
  </view>
</view>

wxss

/* pages/atlas/index.wxss */
.container {
    background-color: #ffffff;
    padding-bottom: 10px;
}

/* 顶部导航栏 */
.top {
    width: 100%;
    height: 90px;
    color: #636363;
    display: flex;
    top: 0;
    position: fixed;
    font-size: 14px;
    text-align: center;
    align-items: center;
    z-index: 5;
    background-color: #ffffff;
    border-bottom: 1px #e1e1e1 solid;
}

.top text {
    position: absolute;
    bottom: 10px;
}

.left {
    width: 65px;
    height: 25px;
    margin-left: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 1px #d4d4d4 solid;
    border-radius: 20px;
    position: absolute;
    bottom: 10px;
}

.left image {
    width: 15px;
    height: 15px;
}

.return {
    transform: rotate(180deg);
}

.line {
    width: 1px;
    height: 60%;
    background-color: #d7c3ac;
}

#house {
    width: 20px;
    height: 20px;
}

.mapTop {
    width: 100%;
}

.mapTop-block {
    width: 15%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    background-color: brown;
}

.mapTop-line {
    width: 80%;
    height: 2px;
    margin-top: 5px;
    background-color: chartreuse;
}

js

var QQMapWX = require('./qqmap-wx-jssdk');

// 实例化API核心类
var qqmapsdk = new QQMapWX({
    key: 'HLBBZ-UXNCV-OUOPC-5AT7V-Y3UG6-UYB5U' // 必填
});

Page({
    // 返回上一页
    returnClick() {
        wx.navigateBack();
    },

    targetHouse() {
        wx.switchTab({
            url: '/pages/goods-list/index',
        });
    },

    data: {
        srcLat: '35.280000',  // 起点纬度（字符串）
        srcLng: '113.980000',  // 起点经度（字符串）
        strategyArrlat: '34.52',  // 终点纬度（字符串）
        strategyArrlng: '110.07', // 终点经度（字符串）
        polyline: [], // 用于存储路线的多段路径
        markers: [] // 用于存储起点和终点的标记
    },

    onLoad() {
        var _this = this;

        // 将坐标转换为数字类型
        var srcLat = parseFloat(_this.data.srcLat);
        var srcLng = parseFloat(_this.data.srcLng);
        var strategyArrlat = parseFloat(_this.data.strategyArrlat);
        var strategyArrlng = parseFloat(_this.data.strategyArrlng);

        // 请求页面数据
        wx.login({
            success: (res) => {
                if (res.code) {
                    // 请求自己的后台服务器，传递 code 获取 session_key 和 openid
                    // 请求景区分类列表
                    wx.request({
                        url: 'https://jingqu.kuxia.top/app/maps/index', // 替换为你自己的服务器地址
                        method: 'POST',
                        data: {
                            scenic_id: 3
                        },
                        success: (response) => {
                            if (response.data.code == 1) {
                                console.log('景区分类列表', response.data.data);
                                this.setData({
                                    scenicList: response.data.data // 更新数据
                                });
                            }
                        },
                        fail: (err) => {
                            console.error('请求失败', err);
                        }
                    });
                }
            }
        });

        // 调用距离计算接口
        qqmapsdk.direction({
            mode: 'driving',
            from: {
                latitude: srcLat,
                longitude: srcLng
            },
            to: {
                latitude: strategyArrlat,
                longitude: strategyArrlng
            },
            success: function (res) {
                var ret = res;
                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;
                }

                for (var i = 0; i < coors.length; i += 2) {
                    pl.push({
                        latitude: coors[i],
                        longitude: coors[i + 1]
                    });
                }

                // 设置polyline属性，将路线显示出来
                _this.setData({
                    latitude: pl[0].latitude,
                    longitude: pl[0].longitude,
                    polyline: [{
                        points: pl,
                        color: '#2A82E4',
                        width: 5
                    }],
                    markers: [{
                        id: 1,
                        latitude: srcLat,
                        longitude: srcLng,
                        iconPath: '/images/start.png', // 起点图标路径
                        width: 30,
                        height: 30
                    }, {
                        id: 2,
                        latitude: strategyArrlat,
                        longitude: strategyArrlng,
                        iconPath: '/images/end.png', // 终点图标路径
                        width: 30,
                        height: 30
                    }]
                });
            },
            fail: function (error) {
                console.error(error);
            }
        });
    }
});

引入文件