feat:我的

wk

2024-11-22 f2dd92deb176ad39b18805d5d2721fad0974a278

 pages/public-page/mapRoute/mapRoute.vue

@@ -1,8 +1,16 @@
<template>
   <view>
      <view class="page-body" style="margin-top: 4rpx;">
      <view class="page-body"
         style="margin-top: 4rpx;">
         <view class="page-section page-section-gap">
            <map style="width: 100%; height: 600px;" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline"></map>
            <map style="width: 100%; height: 600px;"
               :latitude="latitude"
               :longitude="longitude"
               :markers="markers"
               :polyline="polyline"
               @markertap="awaken"
               @callouttap="awaken"
               @tap="awaken"></map>
         </view>
      </view>
      <view class="tip">
@@ -15,245 +23,269 @@
            <text>{{ duration || '' }}</text>
         </view>
      </view>
      <view class="open-button" @click="awaken"><button type="default">跳转</button></view>
      <view class="open-button"
         @click="awaken"><u-button type="primary">使用手机地图</u-button></view>
   </view>
</template>

<script>
export default {
   data() {
      return {
         latitude: 38.04606544104117,
         longitude: 114.48735479816793,
         customerId: '',
         filedId: '',
         orderType: '',
         toFiledId: '',
         // 起点经纬度
         originlongitude: 39.909,
         originlatitude: 116.39742,
         // 终点
         finishlongitude: null,
         finishlatitude: null,
         markers: [
            {
               latitude: null,
               longitude: null,
               iconPath: 'https://mx.jzeg.cn:9095/appimg/image/banner/location.png',
               width: 23,
               height: 33,
               id: 0,
               callout: {
                  content: '起点', //文本
                  color: '#000000', //文字颜色
                  fontSize: 14, //文本大小
                  borderRadius: 15, //边框圆角
                  borderWidth: '10',
                  bgColor: '#e51860', //背景颜色
                  display: 'ALWAYS' //常显
   export default {
      data() {
         return {
            latitude: 38.04606544104117,
            longitude: 114.48735479816793,
            customerId: '',
            filedId: '',
            orderType: '',
            toFiledId: '',
            // 起点经纬度
            originlongitude: 39.909,
            originlatitude: 116.39742,
            // 终点
            finishlongitude: null,
            finishlatitude: null,
            markers: [{
                  latitude: null,
                  longitude: null,
                  iconPath: 'https://wrzs.czjlchem.com:9090/appimg/image/banner/location.png',
                  width: 23,
                  height: 33,
                  id: 0,
                  callout: {
                     content: '起点', //文本
                     color: '#ffffff', //文字颜色
                     fontSize: 10, //文本大小
                     borderRadius: 12, //边框圆角
                     borderWidth: '10',
                     bgColor: '#08b078', //背景颜色
                     display: 'ALWAYS' //常显
                  }
               },
               {
                  latitude: null,
                  longitude: null,
                  iconPath: 'https://wrzs.czjlchem.com:9090/appimg/image/banner/location.png',
                  width: 23,
                  height: 33,
                  id: 1,
                  callout: {
                     content: '终点', //文本
                     color: '#ffffff', //文字颜色
                     fontSize: 10, //文本大小
                     borderRadius: 12, //边框圆角
                     borderWidth: '10',
                     bgColor: '#fc645c', //背景颜色
                     display: 'ALWAYS' //常显
                  }
               }
            },
            {
               latitude: null,
               longitude: null,
               iconPath: 'https://mx.jzeg.cn:9095/appimg/image/banner/location.png',
               width: 23,
               height: 33,
               id: 1,
               callout: {
                  content: '终点', //文本
                  color: '#ffffff', //文字颜色
                  fontSize: 14, //文本大小
                  borderRadius: 15, //边框圆角
                  borderWidth: '10',
                  bgColor: '#e51860', //背景颜色
                  display: 'ALWAYS' //常显
               }
            }
         ],
         polyline: [
            {
            ],
            polyline: [{
               // 每个点的经纬度
               points: [{ latitude: 38.04606544104117, longitude: 114.48735479816793 }, { latitude: 38.049531, longitude: 114.53521899999998 }],
               points: [{ latitude: 38.04606544104117, longitude: 114.48735479816793 }, {
                  latitude: 38.049531,
                  longitude: 114.53521899999998
               }],
               // 颜色
               color: '#0091ff',
               // 宽度
               width: 10
            }
         ],
         distance: null,
         duration: null,
         fromLocation: {},
         toLocation: {}
      };
   },
   methods: {
      getLocation() {
         uni.showLoading({
            title: '加载中’'
         });
         let QQMapWX = require('../../../utils/qqmap-wx-jssdk.js');
         let qqmapsdk = new QQMapWX({
            key: 'HTNBZ-LZGRQ-YDB5S-B4KAS-KLHJH-GHBUE' // 必填
         });
         const params = this.toFiledId ? { filedId: this.filedId, toFiledId: this.toFiledId } : { customerId: this.customerId, filedId: this.filedId };
         this.$reqGet('getAppLocation', params).then(result => {
            console.log(result, '腾讯经纬度');
            let _this = this;
            console.log(_this.orderType, '类型');
            let fromLocation;
            let toLocation;
            if (_this.orderType == '外购' || _this.orderType == '外销') {
               fromLocation = {
                  longitude: result.data.customerLongitude,
                  latitude: result.data.customerLatitude
               };
               toLocation = {
                  longitude: result.data.filedLongitude,
                  latitude: result.data.filedLatitude
               };
            } else if (_this.orderType == '内购' || _this.orderType == '内销') {
               fromLocation = {
                  longitude: result.data.filedLongitude,
                  latitude: result.data.filedLatitude
               };
               toLocation = {
                  longitude: result.data.customerLongitude,
                  latitude: result.data.customerLatitude
               };
            } else {
               fromLocation = {
                  longitude: result.data.filedLongitude,
                  latitude: result.data.filedLatitude
               };
               toLocation = {
                  longitude: result.data.toFiledLongitude,
                  latitude: result.data.toFiledLatitude
               };
            }],
            distance: null,
            duration: null,
            fromLocation: {},
            toLocation: {}
         };
      },
      methods: {
         getLocation() {
            uni.showLoading({
               title: '加载中’'
            });
            let QQMapWX = require('../../../utils/qqmap-wx-jssdk.js');
            let qqmapsdk = new QQMapWX({
               key: 'HTNBZ-LZGRQ-YDB5S-B4KAS-KLHJH-GHBUE' // 必填
            });
            const params = this.toFiledId ? { filedId: this.filedId, toFiledId: this.toFiledId } : {
               customerId: this
                  .customerId,
               filedId: this.filedId
            };
            this.$reqGet('getAppLocation', params).then(result => {
               console.log(result, '腾讯经纬度');
               let _this = this;
               console.log(_this.orderType, '类型');
               let fromLocation;
               let toLocation;
               if (_this.orderType == '外购' || _this.orderType == '外销') {
                  fromLocation = {
                     longitude: result.data.customerLongitude,
                     latitude: result.data.customerLatitude
                  };
                  toLocation = {
                     longitude: result.data.filedLongitude,
                     latitude: result.data.filedLatitude
                  };
               }
               // else if (_this.orderType == '内购' || _this.orderType == '内销') {
               //    fromLocation = {
               //       longitude: result.data.filedLongitude,
               //       latitude: result.data.filedLatitude
               //    };
               //    toLocation = {
               //       longitude: result.data.customerLongitude,
               //       latitude: result.data.customerLatitude
               //    };
               // } 
               else {
                  fromLocation = {
                     longitude: result.data.filedLongitude,
                     latitude: result.data.filedLatitude
                  };
                  toLocation = {
                     longitude: result.data.toFiledLongitude,
                     latitude: result.data.toFiledLatitude
                  };
                  // _this.fromLocation = fromLocation;
                  // _this.toLocation = toLocation;
               }
               console.log(fromLocation, toLocation);
               _this.fromLocation = fromLocation;
               _this.toLocation = toLocation;
            }
            _this.fromLocation = fromLocation;
            _this.toLocation = toLocation;
            //调用距离计算接口
            qqmapsdk.direction({
               mode: 'driving',
               //from参数不填默认当前地址
               from: fromLocation,
               to: toLocation,
               success: function(res) {
                  console.log(res);
                  let ret = res;
                  let coors = ret.result.routes[0].polyline,
                     pl = [];
                  //坐标解压（返回的点串坐标，通过前向差分进行压缩）
                  let kr = 1000000;
                  for (let i = 2; i < coors.length; i++) {
                     coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
                  }
                  //将解压后的坐标放入点串数组pl中
                  for (let i = 0; i < coors.length; i += 2) {
                     pl.push({ latitude: coors[i], longitude: coors[i + 1] });
                  }
                  console.log(pl);
                  //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
                  _this.longitude = pl[0].longitude;
                  _this.latitude = pl[0].latitude;
                  _this.polyline = [
                     {
               //调用距离计算接口
               qqmapsdk.direction({
                  mode: 'driving',
                  //from参数不填默认当前地址
                  from: fromLocation,
                  to: toLocation,
                  success: function(res) {
                     console.log(res);
                     let ret = res;
                     let coors = ret.result.routes[0].polyline,
                        pl = [];
                     //坐标解压（返回的点串坐标，通过前向差分进行压缩）
                     let kr = 1000000;
                     for (let i = 2; i < coors.length; i++) {
                        coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
                     }
                     //将解压后的坐标放入点串数组pl中
                     for (let i = 0; i < coors.length; i += 2) {
                        pl.push({ latitude: coors[i], longitude: coors[i + 1] });
                     }
                     console.log(pl);
                     //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
                     _this.longitude = pl[0].longitude;
                     _this.latitude = pl[0].latitude;
                     _this.polyline = [{
                        points: pl,
                        color: '#FF0000DD',
                        color: '#04b474',
                        width: 4,
                        arrowLine: true
                     }];
                     if (_this.orderType == '外购' || _this.orderType == '外销') {
                        _this.$set(_this.markers[0], 'longitude', result.data
                           .customerLongitude);
                        _this.$set(_this.markers[0], 'latitude', result.data.customerLatitude);
                        _this.$set(_this.markers[1], 'longitude', result.data.filedLongitude);
                        _this.$set(_this.markers[1], 'latitude', result.data.filedLatitude);
                     }
                  ];
                  if (_this.orderType == '外购' || _this.orderType == '外销') {
                     _this.$set(_this.markers[0], 'longitude', result.data.customerLongitude);
                     _this.$set(_this.markers[0], 'latitude', result.data.customerLatitude);
                     _this.$set(_this.markers[1], 'longitude', result.data.filedLongitude);
                     _this.$set(_this.markers[1], 'latitude', result.data.filedLatitude);
                  } else if (_this.orderType == '内购' || _this.orderType == '内销') {
                     _this.$set(_this.markers[0], 'longitude', result.data.filedLongitude);
                     _this.$set(_this.markers[0], 'latitude', result.data.filedLatitude);
                     _this.$set(_this.markers[1], 'longitude', result.data.customerLongitude);
                     _this.$set(_this.markers[1], 'latitude', result.data.customerLatitude);
                  } else {
                     _this.$set(_this.markers[0], 'longitude', result.data.filedLongitude);
                     _this.$set(_this.markers[0], 'latitude', result.data.filedLatitude);
                     _this.$set(_this.markers[1], 'longitude', result.data.toFiledLongitude);
                     _this.$set(_this.markers[1], 'latitude', result.data.toFiledLatitude);
                     // else if (_this.orderType == '内购' || _this.orderType == '内销') {
                     //    _this.$set(_this.markers[0], 'longitude', result.data.filedLongitude);
                     //    _this.$set(_this.markers[0], 'latitude', result.data.filedLatitude);
                     //    _this.$set(_this.markers[1], 'longitude', result.data
                     //       .customerLongitude);
                     //    _this.$set(_this.markers[1], 'latitude', result.data.customerLatitude);
                     // } 
                     else {
                        _this.$set(_this.markers[0], 'longitude', result.data.filedLongitude);
                        _this.$set(_this.markers[0], 'latitude', result.data.filedLatitude);
                        _this.$set(_this.markers[1], 'longitude', result.data
                           .toFiledLongitude);
                        _this.$set(_this.markers[1], 'latitude', result.data.toFiledLatitude);
                     }
                  },
                  fail: function(error) {
                     console.error(error);
                  },
                  complete: function(res) {
                     console.log(res);
                     uni.hideLoading();
                     _this.distance = res.result.routes[0].distance;
                     _this.distance = (_this.distance / 1000).toFixed(2);
                     _this.duration = _this.handleTime(res.result.routes[0].duration);
                  }
               },
               fail: function(error) {
                  console.error(error);
               },
               complete: function(res) {
                  console.log(res);
                  uni.hideLoading();
                  _this.distance = res.result.routes[0].distance;
                  _this.distance = (_this.distance / 1000).toFixed(2);
                  _this.duration = _this.handleTime(res.result.routes[0].duration);
               }
               });
            });
         });
         },
         //
         handleTime(time) {
            let now = new Date(); // 获取当前时间
            now.setMinutes(now.getMinutes() + time);
            let hours = now
               .getHours()
               .toString()
               .padStart(2, '0');
            let minutes = now
               .getMinutes()
               .toString()
               .padStart(2, '0');
            return hours + ':' + minutes;
         },
         // 唤醒
         awaken() {
            uni.openLocation({
               latitude: this.markers[1].latitude,
               longitude: this.markers[1].longitude,
               name: '目的地',
               address: '目的地'
            });
         }
      },
      //
      handleTime(time) {
         let now = new Date(); // 获取当前时间
         now.setMinutes(now.getMinutes() + time);
         let hours = now
            .getHours()
            .toString()
            .padStart(2, '0');
         let minutes = now
            .getMinutes()
            .toString()
            .padStart(2, '0');
         return hours + ':' + minutes;
      onLoad(params) {
         this.customerId = params.customerId;
         this.filedId = params.filedId;
         this.orderType = params.orderType;
         if (params.toFiledId) {
            this.toFiledId = params.toFiledId;
         }
      },
      // 唤醒
      awaken() {
         uni.openLocation({
            latitude: this.markers[1].latitude,
            longitude: this.markers[1].longitude,
            name: '目的地位置',
            address: '目的地位置'
         });
      onShow() {
         this.getLocation();
         // this.awaken();
      }
   },
   onLoad(params) {
      this.customerId = params.customerId;
      this.filedId = params.filedId;
      this.orderType = params.orderType;
      if (params.toFiledId) {
         this.toFiledId = params.toFiledId;
      }
   },
   onShow() {
      this.getLocation();
      // this.awaken();
   }
};
   };
</script>

<style lang="scss" scoped>
.tip {
   margin-top: 60rpx;
   width: 94%;
   height: 40rpx;
   font-size: 40rpx;
   display: flex;
   justify-content: space-around;
   .first {
      color: #c78a64;
      text {
         font-size: 45rpx;
         color: #f81414;
<style lang="scss"
   scoped>
   .tip {
      width: 94%;
      font-size: 40rpx;
      margin: vww(22) auto;
      display: flex;
      justify-content: space-around;

      .first {
         color: #515151;

         text {
            font-size: 45rpx;
            color: #f81414;
         }
      }
   }
}
.open-button {
   width: 200rpx;
   margin: 10rpx 0;
}
</style>

   .open-button {
      width: 100%;
      margin: 40rpx 0;
      display: flex;
      justify-content: center;

      /deep/.u-button {
         width: 300rpx;
         border: 1px solid #3b56eb;
         border-radius: 37rpx 37rpx 37rpx 37rpx;
         background-color: transparent;
         color: #3b56eb;
      }
   }
</style>