微信小程序多点路线规划
uni-app 2022-04-22 17:33:16

参考文档：

https://developers.weixin.qq.com/miniprogram/dev/component/map.html

 

完整的页面：

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.     <view class="detail-map">  
  3.         <view class="map-wrap">  
  4.             <map id="navi_map" style='width: 750rpx; height:100vh;' :longitude="longitude" :latitude="latitude" :include-points="points" :markers="markers" :polyline="polyline" :segmentTexts="segmentTexts" @markertap="tapMap" @callouttap="tapMap"></map>  
  5.         </view>  
  6.     </view>  
  7. </template>  
  8.   
  9. <script>  
  10.     export default {  
  11.         data () {  
  12.             return {  
  13.                 mainHeight: 300,  
  14.                 status: 'car',  
  15.                 road_id: 0,  
  16.                 longitude: '', // 经度  
  17.                 latitude: '' ,// 纬度  
  18.                 points: [], // 缩放视野以包含所有给定的坐标点  
  19.                 markers: [], // 标记点  
  20.                 polyline: [],  
  21.                 segmentTexts: []  
  22.             }  
  23.         },  
  24.         onLoad(options) {  
  25.             this.road_id = options.road_id  
  26.               
  27.             var system = this.tool.system();  
  28.             this.mainHeight = system.windowHeight  
  29.               
  30.             this.init()  
  31.         },  
  32.         methods: {  
  33.             async init() {  
  34.                 // #ifdef MP-WEIXIN  
  35.                 if(!this.longitude || !this.latitude){  
  36.                     const location = await this.$store.dispatch('getLocation')  
  37.                     this.longitude = parseFloat(location.longitude)  
  38.                     this.latitude = parseFloat(location.latitude)  
  39.                 }  
  40.                 // #endif  
  41.                 this.gRequest.get('road/detail',{  
  42.                     "data": {  
  43.                         "id": this.road_id  
  44.                     }  
  45.                 },(res) => {  
  46.                     const data = res.data  
  47.                     const itineraries = data.itineraries  
  48.                     // 拎出所有行程点的经纬度值  
  49.                     let segmentTexts = []  
  50.                     let points = []  
  51.                     let markers = []  
  52.                     itineraries.forEach((i,idx) => {  
  53.                         i.points.forEach((e,ii) => {  
  54.                             points.push({  
  55.                                 "latitude": parseFloat(e.latitude),  
  56.                                 "longitude": parseFloat(e.longitude),  
  57.                             })  
  58.                             segmentTexts.push({  
  59.                                 "name": e.name  
  60.                             })  
  61.                             markers.push({  
  62.                                 "id":e.id,  
  63.                                 // "iconPath": "", // 显示的图标  
  64.                                 "callout": {  
  65.                                     "display": "ALWAYS",  
  66.                                     "content":e.name,  
  67.                                     "textAlign":"center",  
  68.                                     "color":"#fff",  
  69.                                     "borderWidth":0,  
  70.                                     "bgColor":'#000',//背景颜色，可使用rgba  
  71.                                     // "anchorY":-3,  
  72.                                     "fontSize":13,  
  73.                                     "borderRadius": 5,  
  74.                                     "padding": 10  
  75.                                 },  
  76.                                 "latitude":parseFloat(e.latitude),  
  77.                                 "longitude":parseFloat(e.longitude),  
  78.                                 "title":e.name  
  79.                             })  
  80.                         });  
  81.                     });  
  82.                     this.points = points  
  83.                     this.polyline = [{  
  84.                         "points": points,  
  85.                         "color": "#426666",  
  86.                         // "color": "#0091ff",  
  87.                         "width": 2,  
  88.                         "borderWidth": 0,  
  89.                         "arrowLine": true  
  90.                     }]  
  91.                     this.segmentTexts = segmentTexts  
  92.                     this.markers = markers  
  93.                       
  94.                     console.log(this.polyline)  
  95.                     console.log(markers)  
  96.                 })  
  97.   
  98.             },  
  99.             tapMap (e) {  
  100.                 const marker = this.markers.filter(item => item.id == e.markerId)  
  101.                 // const marker = this.markers[e.]  
  102.                 if (marker.length) {  
  103.                     // uni.showModal({  
  104.                     //  title: '询问',  
  105.                     //  content: '是否打开地图',  
  106.                     //  showCancel: true,  
  107.                     //  success: res => {  
  108.                             const location = marker[0]  
  109.                             // console.log(location)  
  110.                             uni.openLocation({  
  111.                               latitude: location.latitude,  // 要去的地址经度，浮点数  
  112.                               longitude: location.longitude,  // 要去的地址纬度，浮点数  
  113.                               name: location.title,  // 位置名  
  114.                               address: location.title,  // 要去的地址详情说明  
  115.                               scale: 1,   // 地图缩放级别,整形值,范围从1~28。默认为最大  
  116.                             });  
  117.                     //  },  
  118.                     //  fail: () => {},  
  119.                     //  complete: () => {}  
  120.                     // });  
  121.                 }  
  122.             },  
  123.         }  
  124.     }  
  125. </script>  
  126.   
  127. <style lang="scss" scoped>  
  128.     .detail-map {  
  129.         .control-wrap {  
  130.             width: 750rpx;  
  131.             overflow: hidden;  
  132.             .item {  
  133.                 background: $primary-color;  
  134.                 color: #fff;  
  135.                 height: 60rpx;  
  136.                 line-height: 60rpx;  
  137.                 // padding: 20rpx 0;  
  138.             }  
  139.         }  
  140.         .map-wrap {  
  141.             // height: calc(100vh - (60rpx + env(safe-area-inset-bottom)));  
  142.             height: 100vh;  
  143.         }  
  144.     }  
  145. </style>  

 

 

 

本文来自于：http://www.yoyo88.cn/study/uniapp/618.html

上一篇 轮播图自动渐隐渐现，最后进入首页
下一篇 微信小程序保存到相册
相关的文章
Powered by yoyo苏ICP备15045725号