index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521
  1. <template>
  2. <view class="trip">
  3. <map id="Map" class="map" style="width: 100%;" :longitude="longitude" :latitude="latitude"
  4. :includePoints="includePoints" enable-poi :polyline="polyline" show-location :markers="markers"
  5. @regionchange="mapChange">
  6. <image class="current" v-show="step == 1" src="../../static/current.png" mode=""></image>
  7. <image class="btn" src="../../static/map-position.png" mode="" @click="myPosition"></image>
  8. </map>
  9. <view class="content">
  10. <template v-if="step == 1">
  11. <image class="bg" src="http://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/4wLUSMH6JJgI8c0598e7a5597db70d809806a0f0541f.png/1.png" mode=""></image>
  12. <view class="title" @click="go">
  13. 专业代驾·安全无忧
  14. </view>
  15. <view class="desc">
  16. 首次体验领66代驾券
  17. </view>
  18. <view class="operation">
  19. <view class="start-box" @click="chooseAddress('start')">
  20. <view class="point"></view>
  21. <view class="start">
  22. 您将从 <text class="green">{{form.start}}</text> 出发
  23. </view>
  24. </view>
  25. <view class="end" @click="chooseAddress('end')">
  26. {{form.end||'您想去哪里'}}
  27. </view>
  28. </view>
  29. </template>
  30. <template v-else>
  31. <view class="charging-box">
  32. <view class="box">
  33. <view class="item" @click="chooseAddress('start')">
  34. {{form.start}}
  35. <image class="jiantou" src="../../static/jiantou-icon.png" mode=""></image>
  36. </view>
  37. <view class="item" @click="chooseAddress('end')">
  38. {{form.end}}
  39. <image class="jiantou" src="../../static/jiantou-icon.png" mode=""></image>
  40. </view>
  41. <view class="price" @click="jump('../expense/index')">
  42. 预计 <text class="num">{{form.taxi_fare}}</text>元
  43. <image class="jiantou" src="../../static/jiantou-icon.png" mode=""></image>
  44. </view>
  45. </view>
  46. <view class="btn">
  47. 呼叫秋香代驾
  48. </view>
  49. </view>
  50. </template>
  51. </view>
  52. </view>
  53. </template>
  54. <script>
  55. // 高德地图
  56. var amapFile = require('../../libs/amap-wx.130.js');
  57. var AMap = new amapFile.AMapWX({
  58. key: '0ebb337dd2e77cb84e40525a5b80d640'
  59. });
  60. // 腾讯地图
  61. var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');
  62. var qqmapsdk = new QQMapWX({
  63. key: 'KX5BZ-B64RC-RO62W-AMWAZ-VVTC3-YAFXF'
  64. });
  65. import {earthDistance} from '@/utils/tool.js'
  66. export default {
  67. data() {
  68. return {
  69. step: 1, //
  70. map: null,
  71. longitude: 0,
  72. latitude: 0,
  73. polyline: 0,
  74. scale: 19,
  75. flag: false, //
  76. markers: [],
  77. mapCenter: {
  78. longitude: 0,
  79. latitude: 0
  80. },
  81. includePoints: [],
  82. form: {
  83. start: '',
  84. startLocation: {
  85. lat: 0,
  86. lng: 0
  87. },
  88. end: '',
  89. endLocation: {
  90. lat: 0,
  91. lng: 0
  92. },
  93. taxi_fare:0
  94. }
  95. }
  96. },
  97. methods: {
  98. // 跳转
  99. jump(url){
  100. uni.navigateTo({
  101. url
  102. })
  103. },
  104. // 回到我的位置
  105. myPosition() {
  106. let that = this
  107. uni.getLocation({
  108. type: 'gcj02',
  109. success(res) {
  110. that.map.moveToLocation({
  111. longitude: res.longitude,
  112. latitude: res.latitude
  113. })
  114. }
  115. })
  116. },
  117. // 地图拖动
  118. mapChange(val) {
  119. console.log(111111111111111);
  120. // 绘制出路线后 就不能拖动地图选择起点
  121. if(this.step == 2) return
  122. let that = this
  123. if (val.type == 'end') {
  124. this.mapCenter = val.target.centerLocation
  125. qqmapsdk.reverseGeocoder({
  126. location: {
  127. longitude: val.target.centerLocation.longitude,
  128. latitude: val.target.centerLocation.latitude
  129. },
  130. poi_options: 'policy=3&address_format=short&radius=30',
  131. get_poi: 1,
  132. success(r) {
  133. console.log('地图拖动',r);
  134. if (r.result.address_reference.landmark_l2._dir_desc == '内') {
  135. }
  136. // 获取最近的店铺
  137. let arr = r.result.pois.sort((a,b)=>{return a._distance - b._distance})
  138. that.form.start = r.result.pois[0].title
  139. that.form.startLocation = r.result.pois[0].location
  140. uni.setStorageSync('city', r.result.address_component.city)
  141. },
  142. fail(e) {
  143. console.log('错误', e);
  144. }
  145. })
  146. }
  147. },
  148. // 选择地址
  149. chooseAddress(type) {
  150. uni.setStorageSync('form', JSON.stringify(this.form))
  151. uni.navigateTo({
  152. url: '../chooseAddress/index?type=' + type
  153. })
  154. },
  155. // 获取当前经纬度
  156. initPosition() {
  157. let that = this
  158. uni.getLocation({
  159. type: 'gcj02',
  160. success(res) {
  161. console.log(res);
  162. that.longitude = res.longitude
  163. that.latitude = res.latitude
  164. that.mapCenter = {
  165. longitude: res.longitude,
  166. latitude: res.latitude
  167. }
  168. that.myPosition()
  169. }
  170. })
  171. },
  172. //绘制路线
  173. go() {
  174. this.step = 2
  175. var _this = this;
  176. //调用距离计算接口
  177. qqmapsdk.direction({
  178. mode: 'driving', //可选值:'driving'(驾车)、'walking'(步行)、'bicycling'(骑行),不填默认:'driving',可不填
  179. //from参数不填默认当前地址
  180. from: `${_this.form.startLocation.lat},${_this.form.startLocation.lng}`,
  181. to: `${_this.form.endLocation.lat},${_this.form.endLocation.lng}`,
  182. success: function(res) {
  183. console.log('地图绘制',res);
  184. _this.form.taxi_fare = res.result.routes[0].taxi_fare.fare
  185. var ret = res;
  186. var coors = ret.result.routes[0].polyline,
  187. pl = [];
  188. //坐标解压(返回的点串坐标,通过前向差分进行压缩)
  189. var kr = 1000000;
  190. for (var i = 2; i < coors.length; i++) {
  191. coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
  192. }
  193. //将解压后的坐标放入点串数组pl中
  194. for (var i = 0; i < coors.length; i += 2) {
  195. pl.push({
  196. latitude: coors[i],
  197. longitude: coors[i + 1]
  198. })
  199. }
  200. //设置polyline属性,将路线显示出来,将解压坐标第一个数据作为起点
  201. _this.latitude = pl[0].latitude
  202. _this.longitude = pl[0].longitude
  203. _this.map.addMarkers({
  204. markers: [{
  205. latitude: _this.form.startLocation.lat,
  206. longitude: _this.form.startLocation.lng,
  207. width: '82rpx',
  208. height: '95rpx',
  209. iconPath: '/static/start.png',
  210. callout:{
  211. content:_this.form.start,
  212. bgColor:'#fff',
  213. color:'#222',
  214. borderRadius:'50%',
  215. fontSize: '28rpx',
  216. padding:'16rpx',
  217. display:'ALWAYS'
  218. }
  219. },
  220. {
  221. latitude: _this.form.endLocation.lat,
  222. longitude: _this.form.endLocation.lng,
  223. width: '82rpx',
  224. height: '95rpx',
  225. iconPath: '/static/end.png',
  226. callout:{
  227. content:_this.form.end,
  228. bgColor:'#fff',
  229. color:'#222',
  230. borderRadius:'50%',
  231. fontSize: '28rpx',
  232. padding:'16rpx',
  233. display:'ALWAYS'
  234. }
  235. }
  236. ]
  237. })
  238. _this.polyline = [{
  239. points: pl,
  240. color: '#39B0FF',
  241. borderColor: '#0071BC',
  242. arrowLine:true,
  243. width: 4
  244. }]
  245. setTimeout(() => {
  246. let includePoints = []
  247. includePoints.push({
  248. latitude: pl[0].latitude+0.01,
  249. longitude: pl[0].longitude+0.01
  250. })
  251. includePoints.push({
  252. latitude: pl[pl.length - 1].latitude - 0.01,
  253. longitude: pl[pl.length - 1].longitude- 0.01
  254. })
  255. _this.includePoints = includePoints
  256. }, 500)
  257. },
  258. fail: function(error) {
  259. console.error(error);
  260. },
  261. complete: function(res) {
  262. console.log(res);
  263. }
  264. });
  265. }
  266. },
  267. onReady() {
  268. this.map = uni.createMapContext('Map', this)
  269. this.initPosition()
  270. },
  271. onLoad(option) {
  272. let that = this
  273. // 获取地址选择页面传来的数据
  274. const eventChannel = this.getOpenerEventChannel();
  275. if(JSON.stringify(eventChannel) !=='{}'){
  276. eventChannel.on('address', function(data) {
  277. if(uni.getStorageSync('form')){
  278. that.form = JSON.parse(uni.getStorageSync('form'))
  279. }
  280. that.form[option.type] = data.address
  281. that.latitude = data.latitude
  282. that.longitude = data.longitude
  283. that.form[option.type + 'Location'].lat = data.latitude
  284. that.form[option.type + 'Location'].lng = data.longitude
  285. // 如果起点和终点都设置,绘制出路线
  286. if(that.form.start&& that.form.end){
  287. that.go()
  288. }
  289. })
  290. }
  291. },
  292. created() {
  293. }
  294. }
  295. </script>
  296. <style lang="scss" scoped>
  297. .trip {
  298. display: flex;
  299. flex-direction: column;
  300. height: 100vh;
  301. .map {
  302. height: 600rpx;
  303. flex: 1;
  304. position: relative;
  305. .current {
  306. position: absolute;
  307. left: 50%;
  308. top: 50%;
  309. transform: translate(-50%, calc(-50% - 40rpx));
  310. width: 40rpx;
  311. height: 68rpx;
  312. }
  313. .btn {
  314. position: absolute;
  315. bottom: 20rpx;
  316. right: 20rpx;
  317. width: 60rpx;
  318. height: 60rpx;
  319. }
  320. }
  321. .content {
  322. width: 100%;
  323. height: 476rpx;
  324. border-radius: 16rpx 16rpx 0 0;
  325. position: relative;
  326. .title {
  327. font-weight: 400;
  328. color: #FFFFFF;
  329. font-size: 40rpx;
  330. position: absolute;
  331. font-weight: bold;
  332. top: 32rpx;
  333. left: 32rpx;
  334. }
  335. .desc {
  336. color: #FFFFFF;
  337. font-size: 28rpx;
  338. position: absolute;
  339. top: 104rpx;
  340. left: 32rpx;
  341. }
  342. .bg {
  343. width: 100%;
  344. height: 476rpx;
  345. border-radius: 16rpx 16rpx 0 0;
  346. }
  347. .operation {
  348. width: 686rpx;
  349. height: 240rpx;
  350. background: #FFFFFF;
  351. border-radius: 20rpx 20rpx 20rpx 20rpx;
  352. position: absolute;
  353. bottom: 40rpx;
  354. left: 50%;
  355. transform: translateX(-50%);
  356. box-sizing: border-box;
  357. display: flex;
  358. flex-direction: column;
  359. align-items: center;
  360. .start-box {
  361. display: flex;
  362. align-items: center;
  363. width: 630rpx;
  364. height: 80rpx;
  365. line-height: 80rpx;
  366. margin-top: 30rpx;
  367. .point {
  368. width: 16rpx;
  369. height: 16rpx;
  370. background: #07AC82;
  371. border-radius: 50%;
  372. }
  373. .start {
  374. font-weight: bold;
  375. color: #222222;
  376. font-size: 28rpx;
  377. margin-left: 20rpx;
  378. display: flex;
  379. .green {
  380. color: #07AC82;
  381. max-width: 400rpx;
  382. white-space: nowrap;
  383. overflow: hidden;
  384. text-overflow: ellipsis;
  385. display: inline-block;
  386. }
  387. }
  388. }
  389. .end {
  390. width: 630rpx;
  391. height: 80rpx;
  392. line-height: 80rpx;
  393. text-indent: 36rpx;
  394. background: #F0F0F0;
  395. border-radius: 16rpx 16rpx 16rpx 16rpx;
  396. font-weight: bold;
  397. color: #222222;
  398. font-size: 36rpx;
  399. margin-top: 20rpx;
  400. }
  401. }
  402. .charging-box {
  403. width: 100%;
  404. height: 100%;
  405. background: linear-gradient(180deg, #FF7365 0%, #F9F9F9 70%,#FFF 100%);
  406. border-radius: 40rpx 40rpx 0rpx 0rpx;
  407. box-sizing: border-box;
  408. padding: 40rpx 32rpx;
  409. .box {
  410. padding: 30rpx;
  411. background: #fff;
  412. border-radius: 20rpx 20rpx 20rpx 20rpx;
  413. .item {
  414. font-weight: bold;
  415. color: #222222;
  416. font-size: 28rpx;
  417. position: relative;
  418. // padding: 14rpx 0;
  419. line-height: 70rpx;
  420. height: 70rpx;
  421. padding-left: 32rpx;
  422. .jiantou{
  423. width: 20rpx;
  424. height: 20rpx;
  425. position: absolute;
  426. top: 50%;
  427. right: 0%;
  428. transform: translateY(-50%);
  429. }
  430. &::before {
  431. content: '';
  432. position: absolute;
  433. top: 50%;
  434. left: 0;
  435. transform: translateY(-50%);
  436. width: 16rpx;
  437. height: 16rpx;
  438. border-radius: 50%;
  439. background: #07AC82;
  440. }
  441. }
  442. .end.item {
  443. border-bottom: 2rpx solid #F0F0F0;
  444. &::before {
  445. background: #FF4A39;
  446. }
  447. }
  448. .price {
  449. font-size: 28rpx;
  450. color: #FF4A39;
  451. margin: 22rpx auto 0;
  452. text-align: center;
  453. position: relative;
  454. .num {
  455. font-weight: bold;
  456. font-size: 30rpx;
  457. }
  458. .jiantou{
  459. width: 20rpx;
  460. height: 20rpx;
  461. position: absolute;
  462. top: 50%;
  463. right: 0%;
  464. transform: translateY(-50%);
  465. }
  466. }
  467. }
  468. .btn {
  469. width: 100%;
  470. line-height: 80rpx;
  471. text-align: center;
  472. background: #FF4A39;
  473. border-radius: 40rpx 40rpx 40rpx 40rpx;
  474. margin-top: 28rpx;
  475. font-weight: bold;
  476. color: #FFFFFF;
  477. font-size: 28rpx;
  478. }
  479. }
  480. }
  481. }
  482. </style>