253 lines
6.6 KiB
Plaintext
253 lines
6.6 KiB
Plaintext
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
<map id="map" :show-compass="true" :include-points="points" :polyline="polyline" lang="en" :longitude="center.longitude" :latitude="center.latitude"
|
||
|
|
:markers="markers" bindmarkertap="handleMarkerTap" show-location
|
||
|
|
:style="'width:' + windowWidth + 'px;' + 'height:'+ windowHeight+'px;' ">
|
||
|
|
</map>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import request from '../../utils/request'
|
||
|
|
import config from '@/config'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
//打车预估路线
|
||
|
|
polyline: [],
|
||
|
|
center: {
|
||
|
|
latitude: null,
|
||
|
|
longitude: null
|
||
|
|
},
|
||
|
|
mapContext: null,
|
||
|
|
|
||
|
|
controls: [],
|
||
|
|
markers: [],
|
||
|
|
startPoint: [],
|
||
|
|
endPoint: [],
|
||
|
|
// 接口返回
|
||
|
|
container: {},
|
||
|
|
routeTitle:'',
|
||
|
|
distance: 0,
|
||
|
|
duration: 0,
|
||
|
|
cost:0,
|
||
|
|
points:[]
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(option) {
|
||
|
|
this.startPoint = option.startPoint.split(',')
|
||
|
|
this.endPoint = option.endPoint.split(',')
|
||
|
|
this.startExecution()
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
windowHeight() {
|
||
|
|
return uni.getSystemInfoSync().windowHeight;
|
||
|
|
},
|
||
|
|
windowWidth() {
|
||
|
|
return uni.getSystemInfoSync().windowWidth;
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
startExecution() {
|
||
|
|
let that = this
|
||
|
|
uni.showLoading({
|
||
|
|
title: 'Loading...'
|
||
|
|
});
|
||
|
|
request({
|
||
|
|
url: 'walkApi/getIntegratedRouteInfo',
|
||
|
|
method: 'post',
|
||
|
|
data: {
|
||
|
|
startLocationLng: this.startPoint[0],
|
||
|
|
startLocationLat: this.startPoint[1],
|
||
|
|
endLocationLng: this.endPoint[0],
|
||
|
|
endLocationLat: this.endPoint[1],
|
||
|
|
}
|
||
|
|
}).then(res => {
|
||
|
|
|
||
|
|
that.duration = res.data.duration/60
|
||
|
|
that.distance = res.data.walkingDistance/1000
|
||
|
|
that.cost = res.data.cost
|
||
|
|
let segments = res.data.segments
|
||
|
|
that.points = []
|
||
|
|
//先进行步行的线路展示
|
||
|
|
that.polyline = []
|
||
|
|
for (var item of segments) {
|
||
|
|
let walking = item.walking
|
||
|
|
if(walking&&walking.polyline){
|
||
|
|
let item = {}
|
||
|
|
item.color = '#787878'
|
||
|
|
item.points = walking.polyline
|
||
|
|
item.width = 11
|
||
|
|
item.dottedLine = true
|
||
|
|
that.polyline.push(item)
|
||
|
|
//that.points=that.points.concat(item.points)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//再进行公交的线路展示
|
||
|
|
for (var item of segments) {
|
||
|
|
let bus = item.bus
|
||
|
|
if(bus&&bus.length>0){
|
||
|
|
for (var busIt of bus){
|
||
|
|
let item = {}
|
||
|
|
item.color = '#5500ff'
|
||
|
|
item.points = busIt.polyline
|
||
|
|
item.width = 18
|
||
|
|
item.arrowLine = true
|
||
|
|
that.polyline.push(item)
|
||
|
|
//that.points=that.points.concat(item.points)
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//进行标记点处理
|
||
|
|
that.markers = []
|
||
|
|
//起点和终点处理
|
||
|
|
that.markers.push({
|
||
|
|
id:1,
|
||
|
|
label:{
|
||
|
|
content:'Start Point',
|
||
|
|
fontSize:8,
|
||
|
|
color:'#145e07'
|
||
|
|
},
|
||
|
|
iconPath:config.startStopIcon,
|
||
|
|
latitude: this.startPoint[1],
|
||
|
|
longitude: this.startPoint[0],
|
||
|
|
width: 20,
|
||
|
|
height: 20,
|
||
|
|
})
|
||
|
|
|
||
|
|
that.markers.push({
|
||
|
|
id:2,
|
||
|
|
label:{
|
||
|
|
content:'End Point',
|
||
|
|
fontSize:8,
|
||
|
|
color:'#145e07'
|
||
|
|
},
|
||
|
|
iconPath:config.endStopIcon,
|
||
|
|
latitude: this.endPoint[1],
|
||
|
|
longitude: this.endPoint[0],
|
||
|
|
width: 20,
|
||
|
|
height: 20,
|
||
|
|
})
|
||
|
|
let i=1;
|
||
|
|
for (var item of segments) {
|
||
|
|
let bus = item.bus
|
||
|
|
if(bus&&bus.length>0){
|
||
|
|
for (var busIt of bus){
|
||
|
|
//途径上车点
|
||
|
|
that.markers.push({
|
||
|
|
id:busIt.departureStop.id,
|
||
|
|
label:{
|
||
|
|
content:busIt.name,
|
||
|
|
fontSize:8,
|
||
|
|
color:'#145e07'
|
||
|
|
},
|
||
|
|
iconPath:config.varStop,
|
||
|
|
latitude: busIt.departureStop.locationLat,
|
||
|
|
longitude: busIt.departureStop.locationLng,
|
||
|
|
width: 20,
|
||
|
|
height: 20,
|
||
|
|
})
|
||
|
|
that.points.push({
|
||
|
|
latitude: that.offsetLatitude1(busIt.departureStop.locationLat,30000),
|
||
|
|
longitude: busIt.departureStop.locationLng
|
||
|
|
})
|
||
|
|
that.points.push({
|
||
|
|
latitude: that.offsetLatitude2(busIt.departureStop.locationLat,30000),
|
||
|
|
longitude: busIt.departureStop.locationLng
|
||
|
|
})
|
||
|
|
that.points.push({
|
||
|
|
latitude: busIt.departureStop.locationLat,
|
||
|
|
longitude: that.offsetLongitude1(busIt.departureStop.locationLng,30000)
|
||
|
|
})
|
||
|
|
that.points.push({
|
||
|
|
latitude: busIt.departureStop.locationLat,
|
||
|
|
longitude: that.offsetLongitude2(busIt.departureStop.locationLng,30000)
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
that.points.push({
|
||
|
|
latitude: that.offsetLatitude1(busIt.arrivalStop.locationLat,30000),
|
||
|
|
longitude: busIt.arrivalStop.locationLng
|
||
|
|
})
|
||
|
|
that.points.push({
|
||
|
|
latitude: that.offsetLatitude2(busIt.arrivalStop.locationLat,30000),
|
||
|
|
longitude: busIt.arrivalStop.locationLng
|
||
|
|
})
|
||
|
|
that.points.push({
|
||
|
|
latitude: busIt.arrivalStop.locationLat,
|
||
|
|
longitude: that.offsetLongitude1(busIt.arrivalStop.locationLng,30000)
|
||
|
|
})
|
||
|
|
that.points.push({
|
||
|
|
latitude: busIt.arrivalStop.locationLat,
|
||
|
|
longitude: that.offsetLongitude2(busIt.arrivalStop.locationLng,30000)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
console.log(that.points);
|
||
|
|
}).finally(()=>{
|
||
|
|
uni.hideLoading()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
offsetLongitude1(oldValue,num) {
|
||
|
|
oldValue =Number.parseFloat(oldValue)
|
||
|
|
const R = 6371000; // 地球半径，单位为米
|
||
|
|
const latRad = oldValue * Math.PI / 180;
|
||
|
|
const deltaLon = num / (R * Math.cos(latRad));
|
||
|
|
return oldValue + deltaLon;
|
||
|
|
},
|
||
|
|
offsetLongitude2(oldValue,num) {
|
||
|
|
oldValue =Number.parseFloat(oldValue)
|
||
|
|
const R = 6371000; // 地球半径，单位为米
|
||
|
|
const latRad = oldValue * Math.PI / 180;
|
||
|
|
const deltaLon = num / (R * Math.cos(latRad));
|
||
|
|
return oldValue - deltaLon;
|
||
|
|
},
|
||
|
|
offsetLatitude1(oldValue,num) {
|
||
|
|
oldValue =Number.parseFloat(oldValue)
|
||
|
|
const R = 6371000; // 地球半径，单位为米
|
||
|
|
const deltaLat = num / R;
|
||
|
|
return oldValue + deltaLat;
|
||
|
|
},
|
||
|
|
offsetLatitude2(oldValue,num) {
|
||
|
|
oldValue =Number.parseFloat(oldValue)
|
||
|
|
const R = 6371000; // 地球半径，单位为米
|
||
|
|
const deltaLat = num / R;
|
||
|
|
return oldValue - deltaLat;
|
||
|
|
},
|
||
|
|
goback() {
|
||
|
|
uni.navigateBack()
|
||
|
|
},
|
||
|
|
|
||
|
|
beforeDestroy() {
|
||
|
|
if (this.timer) {
|
||
|
|
clearInterval(this.timer);
|
||
|
|
this.timer = null;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 对于 TabBar 类型页面还需要额外关注 onHide 钩子
|
||
|
|
onHide() {
|
||
|
|
if (this.timer) {
|
||
|
|
clearInterval(this.timer);
|
||
|
|
this.timer = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.container {
|
||
|
|
width: 750rpx;
|
||
|
|
flex: 1;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
</style>
|