qingyiay
2023-05-30 4b74ae71c84d7c3a2fcc83d1ef75f11f8f8c05e0
pages/public-page/mapRoute/mapRoute.vue
@@ -1,17 +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;"
            <map style="width: 100%; height: 600px;"
               :latitude="latitude"
               :longitude="longitude"
               :markers="markers"
               :polyline="polyline"
               @markertap="awaken"
               @callouttap="awaken"
               @tap="awaken"
            ></map>
               @tap="awaken"></map>
         </view>
      </view>
      <view class="tip">
@@ -24,7 +23,8 @@
            <text>{{ duration || '' }}</text>
         </view>
      </view>
      <view class="open-button" @click="awaken"><u-button type="primary">使用手机地图</u-button></view>
      <view class="open-button"
         @click="awaken"><u-button type="primary">使用手机地图</u-button></view>
   </view>
</template>
@@ -44,8 +44,7 @@
         // 终点
         finishlongitude: null,
         finishlatitude: null,
         markers: [
            {
            markers: [{
               latitude: null,
               longitude: null,
               iconPath: 'https://mx.jzeg.cn:9095/appimg/image/banner/location.png',
@@ -80,16 +79,17 @@
               }
            }
         ],
         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: {},
@@ -105,7 +105,11 @@
         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 };
            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;
@@ -121,16 +125,18 @@
                  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 {
               }
               // 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
@@ -139,9 +145,10 @@
                  longitude: result.data.toFiledLongitude,
                  latitude: result.data.toFiledLatitude
               };
               _this.fromLocation = fromLocation;
               _this.toLocation = toLocation;
                  // _this.fromLocation = fromLocation;
                  // _this.toLocation = toLocation;
            }
               console.log(fromLocation, toLocation);
            _this.fromLocation = fromLocation;
            _this.toLocation = toLocation;
            //调用距离计算接口
@@ -168,28 +175,31 @@
                  //设置polyline属性,将路线显示出来,将解压坐标第一个数据作为起点
                  _this.longitude = pl[0].longitude;
                  _this.latitude = pl[0].latitude;
                  _this.polyline = [
                     {
                     _this.polyline = [{
                        points: pl,
                        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], '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 == '内销') {
                     }
                     // 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.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], 'longitude', result.data
                           .toFiledLongitude);
                     _this.$set(_this.markers[1], 'latitude', result.data.toFiledLatitude);
                  }
               },
@@ -225,8 +235,8 @@
         uni.openLocation({
            latitude: this.markers[1].latitude,
            longitude: this.markers[1].longitude,
            name: '目的地位置',
            address: '目的地位置'
               name: '目的地',
               address: '目的地'
         });
      }
   },
@@ -245,26 +255,31 @@
};
</script>
<style lang="scss" scoped>
<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: 100%;
   margin: 40rpx 0;
   display: flex;
   justify-content: center;
   /deep/.u-button {
      width: 300rpx;
      border: 1px solid #3b56eb;