|
@@ -17,15 +17,24 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import { getCleanWay } from '@/api/unclear.js'
|
|
import { getCleanWay } from '@/api/unclear.js'
|
|
|
|
+ var QQMapWX = require('@/libs/qqmap-wx-jssdk.min.js')
|
|
|
|
+ var qqmapsdk
|
|
export default{
|
|
export default{
|
|
data(){
|
|
data(){
|
|
return{
|
|
return{
|
|
latitude: null, // 纬度
|
|
latitude: null, // 纬度
|
|
longitude: null, // 经度
|
|
longitude: null, // 经度
|
|
- markers: [],
|
|
|
|
- polyline: null // 路线
|
|
|
|
|
|
+ markers: [], // 所有网点标注点
|
|
|
|
+ distanceMark: [], // 按距离计算远近后的网点标注点
|
|
|
|
+ polyline: null, // 路线
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ onLoad() {
|
|
|
|
+ // 实例化API核心类
|
|
|
|
+ qqmapsdk = new QQMapWX({
|
|
|
|
+ key: 'FRCBZ-IDZWW-FGDRR-O3SQM-ZW5C2-LRBDM'
|
|
|
|
+ })
|
|
|
|
+ },
|
|
onShow() {
|
|
onShow() {
|
|
this.getLocation()
|
|
this.getLocation()
|
|
},
|
|
},
|
|
@@ -36,7 +45,6 @@
|
|
uni.getLocation({
|
|
uni.getLocation({
|
|
type: 'gcj02',
|
|
type: 'gcj02',
|
|
success: function (res) {
|
|
success: function (res) {
|
|
- console.log(res.latitude,res.longitude)
|
|
|
|
_this.latitude = res.latitude // 纬度
|
|
_this.latitude = res.latitude // 纬度
|
|
_this.longitude = res.longitude // 经度
|
|
_this.longitude = res.longitude // 经度
|
|
_this.getCleanWay() // 获取个人待清运清单
|
|
_this.getCleanWay() // 获取个人待清运清单
|
|
@@ -49,52 +57,140 @@
|
|
if(res.status == 200){
|
|
if(res.status == 200){
|
|
this.markers = []
|
|
this.markers = []
|
|
res.data.map((item, index) => {
|
|
res.data.map((item, index) => {
|
|
- this.markers.push({
|
|
|
|
- id: index+1,
|
|
|
|
- latitude: item.lat,
|
|
|
|
- longitude: item.lng,
|
|
|
|
- width: '60rpx',
|
|
|
|
- height: '60rpx',
|
|
|
|
- iconPath: '/static/store.png',
|
|
|
|
- label: {
|
|
|
|
- content: item.stationName || '--',
|
|
|
|
- bgColor: '#fff',
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
|
|
+ if(item.lat && item.lng){
|
|
|
|
+ this.markers.push({
|
|
|
|
+ id: index+1,
|
|
|
|
+ latitude: item.lat,
|
|
|
|
+ longitude: item.lng,
|
|
|
|
+ width: '60rpx',
|
|
|
|
+ height: '60rpx',
|
|
|
|
+ iconPath: '/static/store.png',
|
|
|
|
+ label: {
|
|
|
|
+ content: item.stationName || '--',
|
|
|
|
+ bgColor: '#fff',
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
})
|
|
})
|
|
- this.onPolyline()
|
|
|
|
|
|
+ this.onCalculateDistance() // 计算距离
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- // 连线
|
|
|
|
- onPolyline(){
|
|
|
|
|
|
+ // 将所有标注点与当前位置进行距离计算
|
|
|
|
+ onCalculateDistance(){
|
|
|
|
+ const _this = this
|
|
|
|
+ const startPos = { latitude: _this.latitude, longitude: _this.longitude }
|
|
|
|
+ let destPos = []
|
|
|
|
+ _this.markers.map(item => {
|
|
|
|
+ destPos.push({ latitude: item.latitude, longitude: item.longitude })
|
|
|
|
+ })
|
|
|
|
+ //调用距离计算接口
|
|
|
|
+ qqmapsdk.calculateDistance({
|
|
|
|
+ mode: 'driving', //可选值:'driving'(驾车)、'walking'(步行),不填默认:'walking',可不填
|
|
|
|
+ //from参数不填默认当前地址
|
|
|
|
+ //获取表单提交的经纬度并设置from和to参数(示例为string格式)
|
|
|
|
+ from: startPos, //若起点有数据则采用起点坐标,若为空默认当前地址
|
|
|
|
+ to: destPos, //终点坐标
|
|
|
|
+ success: function(res) {//成功后的回调
|
|
|
|
+ var res = res.result
|
|
|
|
+ _this.distanceMark = []
|
|
|
|
+ for (var i = 0; i < res.elements.length; i++) {
|
|
|
|
+ // 将距离值加入标注点信息中
|
|
|
|
+ _this.distanceMark.push({
|
|
|
|
+ latitude: res.elements[i].to.lat,
|
|
|
|
+ longitude: res.elements[i].to.lng,
|
|
|
|
+ distance: res.elements[i].distance
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ // 数组升序排序
|
|
|
|
+ _this.distanceMark.sort(_this.compare( 'distance', true ))
|
|
|
|
+ _this.onDirection() // 路线规划
|
|
|
|
+ },
|
|
|
|
+ fail: function(error) {
|
|
|
|
+ console.error(error)
|
|
|
|
+ },
|
|
|
|
+ complete: function(res) {
|
|
|
|
+ // console.log(res)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 数组排序
|
|
|
|
+ compare(property, desc){
|
|
|
|
+ return function (a, b) {
|
|
|
|
+ var value1 = a[property]
|
|
|
|
+ var value2 = b[property]
|
|
|
|
+ if(desc==true){ // 升序排列
|
|
|
|
+ return value1 - value2
|
|
|
|
+ }else{ // 降序排列
|
|
|
|
+ return value2 - value1
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 路线规划
|
|
|
|
+ onDirection(){
|
|
const _this = this
|
|
const _this = this
|
|
- // 连线需至少两个点
|
|
|
|
- if(_this.markers.length>0){
|
|
|
|
- _this.polyline = []
|
|
|
|
- _this.markers.map((item,index) => {
|
|
|
|
|
|
+ _this.polyline = []
|
|
|
|
+ // 将所有标注点都按距离进行路线规划
|
|
|
|
+ _this.distanceMark.map((item,index) => {
|
|
|
|
+ var position = null
|
|
|
|
+ if(index==0){
|
|
|
|
+ position = [
|
|
|
|
+ { latitude: _this.latitude, longitude: _this.longitude },
|
|
|
|
+ { latitude: item.latitude, longitude: item.longitude }
|
|
|
|
+ ]
|
|
|
|
+ // 当前位置到第一个标注点的路线规划
|
|
|
|
+ _this.getDirection(position)
|
|
|
|
+ }else{
|
|
|
|
+ position = [
|
|
|
|
+ { latitude: _this.distanceMark[index-1].latitude, longitude: _this.distanceMark[index-1].longitude },
|
|
|
|
+ { latitude: item.latitude, longitude: item.longitude }
|
|
|
|
+ ]
|
|
|
|
+ // 第index-1个标注点到第index个标注点的路线规划
|
|
|
|
+ _this.getDirection(position)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 路线规划
|
|
|
|
+ getDirection(position){
|
|
|
|
+ const _this = this
|
|
|
|
+ qqmapsdk.direction({
|
|
|
|
+ mode: 'driving',//可选值:'driving'(驾车)、'walking'(步行)、'bicycling'(骑行),不填默认:'driving',可不填
|
|
|
|
+ //from参数不填默认当前地址
|
|
|
|
+ from: {
|
|
|
|
+ latitude: position[0].latitude,
|
|
|
|
+ longitude: position[0].longitude
|
|
|
|
+ },
|
|
|
|
+ to: {
|
|
|
|
+ latitude: position[1].latitude,
|
|
|
|
+ longitude: position[1].longitude
|
|
|
|
+ },
|
|
|
|
+ success: function (res) {
|
|
|
|
+ var ret = res
|
|
|
|
+ var coors = ret.result.routes[0].polyline, pl = []
|
|
|
|
+ //坐标解压(返回的点串坐标,通过前向差分进行压缩)
|
|
|
|
+ var kr = 1000000
|
|
|
|
+ for (var i = 2; i < coors.length; i++) {
|
|
|
|
+ coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
|
|
|
|
+ }
|
|
|
|
+ //将解压后的坐标放入点串数组pl中
|
|
|
|
+ for (var i = 0; i < coors.length; i += 2) {
|
|
|
|
+ pl.push({ latitude: coors[i], longitude: coors[i + 1] })
|
|
|
|
+ }
|
|
|
|
+ //设置polyline属性,将路线显示出来,将解压坐标第一个数据作为起点
|
|
_this.polyline.push({
|
|
_this.polyline.push({
|
|
- points: [
|
|
|
|
- {latitude: null, longitude: null},
|
|
|
|
- {latitude: null, longitude: null}
|
|
|
|
- ],
|
|
|
|
|
|
+ points: pl,
|
|
arrowLine: true,
|
|
arrowLine: true,
|
|
- width: 6,
|
|
|
|
|
|
+ width: 8,
|
|
color: '#07c160'
|
|
color: '#07c160'
|
|
})
|
|
})
|
|
- if(index==0){
|
|
|
|
- _this.polyline[index].points[0].latitude = _this.latitude
|
|
|
|
- _this.polyline[index].points[0].longitude = _this.longitude
|
|
|
|
- _this.polyline[index].points[1].latitude = item.latitude
|
|
|
|
- _this.polyline[index].points[1].longitude = item.longitude
|
|
|
|
- }else{
|
|
|
|
- _this.polyline[index].points[0].latitude = _this.markers[index-1].latitude
|
|
|
|
- _this.polyline[index].points[0].longitude = _this.markers[index-1].longitude
|
|
|
|
- _this.polyline[index].points[1].latitude = item.latitude
|
|
|
|
- _this.polyline[index].points[1].longitude = item.longitude
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+ fail: function (error) {
|
|
|
|
+ console.error(error)
|
|
|
|
+ },
|
|
|
|
+ complete: function (res) {
|
|
|
|
+ // console.log(res)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
},
|
|
},
|
|
// 点击标注点,调用第三方地图查看规划路线
|
|
// 点击标注点,调用第三方地图查看规划路线
|
|
markertap(e){
|
|
markertap(e){
|
|
@@ -104,7 +200,7 @@
|
|
latitude: item.latitude,
|
|
latitude: item.latitude,
|
|
longitude: item.longitude,
|
|
longitude: item.longitude,
|
|
success: function () {
|
|
success: function () {
|
|
- console.log('success');
|
|
|
|
|
|
+
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|