| | |
| | | <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"> |
| | |
| | | <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> |
| | | |
| | |
| | | // 终点 |
| | | finishlongitude: null, |
| | | finishlatitude: null, |
| | | markers: [ |
| | | { |
| | | markers: [{ |
| | | latitude: null, |
| | | longitude: null, |
| | | iconPath: 'https://mx.jzeg.cn:9095/appimg/image/banner/location.png', |
| | |
| | | } |
| | | } |
| | | ], |
| | | 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: {}, |
| | |
| | | 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; |
| | |
| | | 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 |
| | |
| | | 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; |
| | | //调用距离计算接口 |
| | |
| | | //设置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); |
| | | } |
| | | }, |
| | |
| | | uni.openLocation({ |
| | | latitude: this.markers[1].latitude, |
| | | longitude: this.markers[1].longitude, |
| | | name: '目的地位置', |
| | | address: '目的地位置' |
| | | name: '目的地', |
| | | address: '目的地' |
| | | }); |
| | | } |
| | | }, |
| | |
| | | }; |
| | | </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; |