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);}});}
});引入文件