123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192 |
- <template>
- <view>
- <map
- id="map"
- scale="15"
- :longitude="longitude"
- :latitude="latitude"
- :enable-poi="true"
- class="map"
- :style="mapStyle"
- :polyline="polyline"
- :markers="markers"
- @longpress="showHandle"
- >
- <!-- <cover-image class="location" src="../static/workbench/location.png" @tap="returnLocationHandle()" /> -->
- <cover-view class="information-container" v-show="infoStatus">
- <cover-image src="../static/move/close-icon.png" class="close-icon" @tap="hideHandle"></cover-image>
- <cover-view class="info">
- <cover-view class="label">剩余</cover-view>
- <cover-view class="value">{{ distance }}公里</cover-view>
- <cover-view class="label">,预计</cover-view>
- <cover-view class="value">{{ duration }}分钟</cover-view>
- </cover-view>
- </cover-view>
- </map>
- </view>
- </template>
- <script>
- let QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');
- let qqmapsdk;
- export default {
- data() {
- return {
- orderId: null,
- status: null,
- mode: null,
- map: null,
- mapStyle: '',
- startLatitude: 0,
- startLongitude: 0,
- endLatitude: 0,
- endLongitude: 0,
- latitude: 0,
- longitude: 0,
- targetLatitude: 0,
- targetLongitude: 0,
- distance: 0,
- duration: 0,
- polyline: [],
- markers: [],
- timer: null,
- infoStatus: true
- };
- },
- methods: {
- formatPolyline(polyline) {
- let coors = polyline;
- let pl = [];
- //坐标解压(返回的点串坐标,通过前向差分进行压缩)
- const 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({
- longitude: coors[i + 1],
- latitude: coors[i]
- });
- }
- return pl;
- },
- calculateLine: function(ref) {
- if (ref.latitude == 0 || ref.longitude == 0) {
- return;
- }
- qqmapsdk.direction({
- mode: ref.mode,
- from: {
- latitude: ref.latitude,
- longitude: ref.longitude
- },
- to: {
- latitude: ref.targetLatitude,
- longitude: ref.targetLongitude
- },
- success: function(resp) {
- let route = resp.result.routes[0];
- let distance = route.distance;
- let duration = route.duration;
- let polyline = route.polyline;
- ref.distance = Math.ceil((distance / 1000) * 10) / 10;
- ref.duration = duration;
- let points = ref.formatPolyline(polyline);
- ref.polyline = [
- {
- points: points,
- width: 6,
- color: '#05B473',
- arrowLine: true
- }
- ];
- ref.markers = [
- {
- id: 1,
- latitude: ref.latitude,
- longitude: ref.longitude,
- width: 35,
- height: 35,
- anchor: {
- x: 0.5,
- y: 0.5
- },
- iconPath: '../static/move/driver-icon.png'
- }
- ];
- },
- fail: function(error) {
- console.log(error);
- }
- });
- },
- hideHandle: function() {
- this.infoStatus = false;
- },
- showHandle: function() {
- this.infoStatus = true;
- }
- },
- onLoad: function(options) {
- let that = this;
- that.orderId = options.orderId;
- qqmapsdk = new QQMapWX({
- key: that.tencent.map.key
- });
- let windowHeight = uni.getSystemInfoSync().windowHeight;
- that.mapStyle = `height:${windowHeight}px`;
- },
- onShow: function() {
- let that = this;
- uni.$on('updateLocation', function(location) {
- if (location != null) {
- that.latitude = location.latitude;
- that.longitude = location.longitude;
- }
- });
- let data = {
- orderId: that.orderId
- };
- that.ajax(that.url.searchOrderForMoveById, 'POST', data, function(resp) {
- let result = resp.data.result;
- let startPlaceLocation = JSON.parse(result.startPlaceLocation);
- that.startLatitude = startPlaceLocation.latitude;
- that.startLongitude = startPlaceLocation.longitude;
- let endPlaceLocation = JSON.parse(result.endPlaceLocation);
- that.endLatitude = endPlaceLocation.latitude;
- that.endLongitude = endPlaceLocation.longitude;
- let status = result.status;
- if (status == 2) {
- that.targetLatitude = that.startLatitude;
- that.targetLongitude = that.startLongitude;
- that.mode = 'bicycling';
- } else if (status == 3 || status == 4) {
- that.targetLatitude = that.endLatitude;
- that.targetLongitude = that.endLongitude;
- that.mode = 'driving';
- }
- that.calculateLine(that);
- that.timer = setInterval(function() {
- that.calculateLine(that);
- }, 6000);
- });
- },
- onHide: function() {
- let that = this;
- uni.$off('updateLocation');
- clearInterval(that.timer);
- that.timer = null;
- }
- };
- </script>
- <style lang="less">
- @import url('move.less');
- </style>
|