rk
3 天以前 609a1931953b2298016bd2b0d6b410666b5ad7b9
bicycle/pages/trajectory/trajectory.vue
@@ -1,10 +1,17 @@
<template>
   <view class="guiji">
      <map></map>
      <map
         :latitude="mapLatitude"
         :longitude="mapLongitude"
         :markers="markers"
         :polyline="polyline"
         :include-points="includePoints"
         scale="14" />
      <view class="info">
         <view class="info_title">车辆编号:BH1018</view>
         <view class="info_info">车辆类型:双排四座电动代步车</view>
         <view class="info_info">车辆类型:双排四座电动代步车</view>
         <view class="info_title">车辆编号:{{ info.bikeCode || '-' }}</view>
         <view class="info_info">骑行开始时间:{{ info.rentDate || '-' }}</view>
         <view class="info_info">骑行结束时间:{{ info.backDate || '-' }}</view>
         <view class="info_info">骑行计费时长:{{ info.duration ? `${info.duration}分钟` : '-' }}</view>
      </view>
   </view>
</template>
@@ -13,8 +20,96 @@
   export default {
      data() {
         return {
            id: null,
            info: {},
            markers: [],
            polyline: [],
            includePoints: [],
            mapLatitude: 31.8206,
            mapLongitude: 117.2272
         };
      },
      onLoad(options) {
         this.id = options.id
         this.getInfo()
      },
      methods: {
         buildMarkers(startPoint, endPoint) {
            const markers = []
            if (startPoint) {
               markers.push({
                  id: 1,
                  latitude: startPoint.latitude,
                  longitude: startPoint.longitude,
                  width: 32,
                  height: 32,
                  iconPath: '/static/icon/ic_star@2x.png',
                  callout: {
                     content: '起点',
                     display: 'ALWAYS',
                     padding: 6,
                     borderRadius: 6,
                     bgColor: '#01B6AD',
                     color: '#FFFFFF',
                     fontSize: 12,
                     textAlign: 'center'
                  }
               })
            }
            if (endPoint) {
               markers.push({
                  id: 2,
                  latitude: endPoint.latitude,
                  longitude: endPoint.longitude,
                  width: 32,
                  height: 32,
                  iconPath: '/static/icon/ic_end@2x.png',
                  callout: {
                     content: '终点',
                     display: 'ALWAYS',
                     padding: 6,
                     borderRadius: 6,
                     bgColor: '#FF5A31',
                     color: '#FFFFFF',
                     fontSize: 12,
                     textAlign: 'center'
                  }
               })
            }
            return markers
         },
         async getInfo() {
            const res = await this.$u.api.orderRides({
               orderId: this.id
            })
            if (res.code === 200) {
               const rideInfo = (res.data && res.data.rides && res.data.rides[0]) || {}
               const tracks = Array.isArray(rideInfo.tracks) ? rideInfo.tracks.filter(item => item && item.latitude && item.longitude) : []
               const startPoint = tracks.length ? tracks[0] : null
               const endPoint = tracks.length ? tracks[tracks.length - 1] : null
               this.info = rideInfo
               this.includePoints = tracks
               this.markers = this.buildMarkers(startPoint, endPoint)
               this.polyline = tracks.length ? [{
                  points: tracks,
                  color: '#01B6AD',
                  width: 6,
                  arrowLine: true,
                  borderColor: '#FFFFFF',
                  borderWidth: 1
               }] : []
               if (startPoint) {
                  this.mapLatitude = startPoint.latitude
                  this.mapLongitude = startPoint.longitude
               }
            }
         }
      }
   }
</script>
@@ -51,4 +146,4 @@
         }
      }
   }
</style>
</style>