修改部分错误，增加新功能

qingyiay

2023-05-17 af436aa050f76584cd5cb88e413e45cd08c15d50

 pages/public-page/mapRoute/mapRoute.vue

@@ -2,7 +2,16 @@
   <view>
      <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,6 +24,7 @@
            <text>{{ duration || '' }}</text>
         </view>
      </view>
      <view class="open-button" @click="awaken"><u-button type="primary">使用手机地图</u-button></view>
   </view>
</template>

@@ -38,13 +48,13 @@
            {
               latitude: null,
               longitude: null,
               iconPath: '../../../static/image/banner/location.png',
               iconPath: 'https://mx.jzeg.cn:9095/appimg/image/banner/location.png',
               width: 23,
               height: 33,
               id: 0,
               callout: {
                  content: '起点', //文本
                  color: '#ffffff', //文字颜色
                  color: '#000000', //文字颜色
                  fontSize: 14, //文本大小
                  borderRadius: 15, //边框圆角
                  borderWidth: '10',
@@ -55,7 +65,7 @@
            {
               latitude: null,
               longitude: null,
               iconPath: '../../../static/image/banner/location.png',
               iconPath: 'https://mx.jzeg.cn:9095/appimg/image/banner/location.png',
               width: 23,
               height: 33,
               id: 1,
@@ -81,7 +91,9 @@
            }
         ],
         distance: null,
         duration: null
         duration: null,
         fromLocation: {},
         toLocation: {}
      };
   },
   methods: {
@@ -93,39 +105,45 @@
         let qqmapsdk = new QQMapWX({
            key: 'HTNBZ-LZGRQ-YDB5S-B4KAS-KLHJH-GHBUE' // 必填
         });
         const params = this.toFiledId ? { toFiledId: this.toFiledId } : { customerId: this.customerId, filedId: this.filedId };
         this.$reqGet('getAppLocation', params).then(res => {
            console.log(res, '腾讯经纬度');
         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 == '外销') {
               _this.$set(_this.markers[0], 'longitude', res.data.customerLongitude);
               _this.$set(_this.markers[0], 'latitude', res.data.customerLatitude);
               fromLocation = {
                  longitude: res.data.customerLongitude,
                  latitude: res.data.customerLatitude
                  longitude: result.data.customerLongitude,
                  latitude: result.data.customerLatitude
               };
               _this.$set(_this.markers[1], 'longitude', res.data.filedLongitude);
               _this.$set(_this.markers[1], 'latitude', res.data.filedLatitude);
               toLocation = {
                  longitude: res.data.filedLongitude,
                  latitude: res.data.filedLatitude
                  longitude: result.data.filedLongitude,
                  latitude: result.data.filedLatitude
               };
            } else if (_this.orderType == '内购' || _this.orderType == '内销') {
               _this.$set(_this.markers[0], 'longitude', res.data.filedLongitude);
               _this.$set(_this.markers[0], 'latitude', res.data.filedLatitude);
               fromLocation = {
                  longitude: res.data.filedLongitude,
                  latitude: res.data.filedLatitude
                  longitude: result.data.filedLongitude,
                  latitude: result.data.filedLatitude
               };
               _this.$set(_this.markers[1], 'longitude', res.data.customerLongitude);
               _this.$set(_this.markers[1], 'latitude', res.data.customerLatitude);
               toLocation = {
                  longitude: res.data.customerLongitude,
                  latitude: res.data.customerLatitude
                  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;
            }
            _this.fromLocation = fromLocation;
            _this.toLocation = toLocation;
            //调用距离计算接口
            qqmapsdk.direction({
               mode: 'driving',
@@ -158,6 +176,22 @@
                        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);
                  } 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);
@@ -185,6 +219,15 @@
            .toString()
            .padStart(2, '0');
         return hours + ':' + minutes;
      },
      // 唤醒
      awaken() {
         uni.openLocation({
            latitude: this.markers[1].latitude,
            longitude: this.markers[1].longitude,
            name: '目的地位置',
            address: '目的地位置'
         });
      }
   },
   onLoad(params) {
@@ -196,28 +239,38 @@
      }
   },
   onShow() {
      if (this.orderType !== '转入' || this.orderType !== '转出') {
         this.getLocation();
      } else {
      }
      this.getLocation();
      // this.awaken();
   }
};
</script>

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