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

wxml

1. <view class="container">
2.   <view class="mapTop">
3.     <van-tabs active="{{ active }}" color="#2A82E4" bind:change="onChange">
4.       <view wx:for="{{scenicList}}" wx:key="id">
5.         <van-tab title="{{item.name}}" />
6.       </view>
7.     </van-tabs>
9.     <!-- 显示地图 -->
10.     <view class="view" style="position: absolute;width: 100%;height: 80%;bottom: 20%">
11.       <map id="myMap"
12.            style="width: 100%; height: 100vh;"
13.            longitude="{{longitude}}"
14.            latitude="{{latitude}}"
15.            scale="16"
16.            polyline="{{polyline}}"
17.            show-location="true"
18.            markers="{{markers}}">
19.       </map>
20.     </view>
21.   </view>
22. </view>

复制代码

wxss

1. /* pages/atlas/index.wxss */
2. .container {
3.     background-color: #ffffff;
4.     padding-bottom: 10px;
5. }
7. /* 顶部导航栏 */
8. .top {
9.     width: 100%;
10.     height: 90px;
11.     color: #636363;
12.     display: flex;
13.     top: 0;
14.     position: fixed;
15.     font-size: 14px;
16.     text-align: center;
17.     align-items: center;
18.     z-index: 5;
19.     background-color: #ffffff;
20.     border-bottom: 1px #e1e1e1 solid;
21. }
23. .top text {
24.     position: absolute;
25.     bottom: 10px;
26. }
28. .left {
29.     width: 65px;
30.     height: 25px;
31.     margin-left: 10px;
32.     display: flex;
33.     justify-content: space-around;
34.     align-items: center;
35.     border: 1px #d4d4d4 solid;
36.     border-radius: 20px;
37.     position: absolute;
38.     bottom: 10px;
39. }
41. .left image {
42.     width: 15px;
43.     height: 15px;
44. }
46. .return {
47.     transform: rotate(180deg);
48. }
50. .line {
51.     width: 1px;
52.     height: 60%;
53.     background-color: #d7c3ac;
54. }
56. #house {
57.     width: 20px;
58.     height: 20px;
59. }
61. .mapTop {
62.     width: 100%;
63. }
65. .mapTop-block {
66.     width: 15%;
67.     height: 100%;
68.     display: flex;
69.     flex-direction: column;
70.     align-items: center;
71.     justify-content: center;
72.     font-size: 0.9rem;
73.     background-color: brown;
74. }
76. .mapTop-line {
77.     width: 80%;
78.     height: 2px;
79.     margin-top: 5px;
80.     background-color: chartreuse;
81. }

复制代码

js

1. var QQMapWX = require('./qqmap-wx-jssdk');
3. // 实例化API核心类
4. var qqmapsdk = new QQMapWX({
5.     key: 'HLBBZ-UXNCV-OUOPC-5AT7V-Y3UG6-UYB5U' // 必填
6. });
8. Page({
9.     // 返回上一页
10.     returnClick() {
11.         wx.navigateBack();
12.     },
14.     targetHouse() {
15.         wx.switchTab({
16.             url: '/pages/goods-list/index',
17.         });
18.     },
20.     data: {
21.         srcLat: '35.280000',  // 起点纬度（字符串）
22.         srcLng: '113.980000',  // 起点经度（字符串）
23.         strategyArrlat: '34.52',  // 终点纬度（字符串）
24.         strategyArrlng: '110.07', // 终点经度（字符串）
25.         polyline: [], // 用于存储路线的多段路径
26.         markers: [] // 用于存储起点和终点的标记
27.     },
29.     onLoad() {
30.         var _this = this;
32.         // 将坐标转换为数字类型
33.         var srcLat = parseFloat(_this.data.srcLat);
34.         var srcLng = parseFloat(_this.data.srcLng);
35.         var strategyArrlat = parseFloat(_this.data.strategyArrlat);
36.         var strategyArrlng = parseFloat(_this.data.strategyArrlng);
38.         // 请求页面数据
39.         wx.login({
40.             success: (res) => {
41.                 if (res.code) {
42.                     // 请求自己的后台服务器，传递 code 获取 session_key 和 openid
43.                     // 请求景区分类列表
44.                     wx.request({
45.                         url: 'https://jingqu.kuxia.top/app/maps/index', // 替换为你自己的服务器地址
46.                         method: 'POST',
47.                         data: {
48.                             scenic_id: 3
49.                         },
50.                         success: (response) => {
51.                             if (response.data.code == 1) {
52.                                 console.log('景区分类列表', response.data.data);
53.                                 this.setData({
54.                                     scenicList: response.data.data // 更新数据
55.                                 });
56.                             }
57.                         },
58.                         fail: (err) => {
59.                             console.error('请求失败', err);
60.                         }
61.                     });
62.                 }
63.             }
64.         });
66.         // 调用距离计算接口
67.         qqmapsdk.direction({
68.             mode: 'driving',
69.             from: {
70.                 latitude: srcLat,
71.                 longitude: srcLng
72.             },
73.             to: {
74.                 latitude: strategyArrlat,
75.                 longitude: strategyArrlng
76.             },
77.             success: function (res) {
78.                 var ret = res;
79.                 var coors = ret.result.routes[0].polyline,
80.                     pl = [];
81.                 var kr = 1000000;
82.                 for (var i = 2; i < coors.length; i++) {
83.                     coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
84.                 }
86.                 for (var i = 0; i < coors.length; i += 2) {
87.                     pl.push({
88.                         latitude: coors[i],
89.                         longitude: coors[i + 1]
90.                     });
91.                 }
93.                 // 设置polyline属性，将路线显示出来
94.                 _this.setData({
95.                     latitude: pl[0].latitude,
96.                     longitude: pl[0].longitude,
97.                     polyline: [{
98.                         points: pl,
99.                         color: '#2A82E4',
100.                         width: 5
101.                     }],
102.                     markers: [{
103.                         id: 1,
104.                         latitude: srcLat,
105.                         longitude: srcLng,
106.                         iconPath: '/images/start.png', // 起点图标路径
107.                         width: 30,
108.                         height: 30
109.                     }, {
110.                         id: 2,
111.                         latitude: strategyArrlat,
112.                         longitude: strategyArrlng,
113.                         iconPath: '/images/end.png', // 终点图标路径
114.                         width: 30,
115.                         height: 30
116.                     }]
117.                 });
118.             },
119.             fail: function (error) {
120.                 console.error(error);
121.             }
122.         });
123.     }
124. });

复制代码

引入文件

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。