You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
305 lines
8.1 KiB
305 lines
8.1 KiB
<template> |
|
<view class="ChargingStationMap_body"> |
|
<map @tap='mapTap' :scale="10" @callouttap='callouttap' :circles='circles' :show-location='true' |
|
@regionchange='regionchange' id="map_Id" @markertap='markertap' :markers="markers" |
|
:latitude="location.latitude" :longitude="location.longitude" class="ChargingStationMap"> |
|
<cover-view slot="callout"> |
|
<block v-for="(item,index) in markers" :key="index"> |
|
<cover-view class="customCallout" :marker-id="item.id"> |
|
<cover-image class="customCallout_img" src="../../static/customCallout.png"></cover-image> |
|
<cover-view></cover-view> |
|
<cover-view class="content flex column"> |
|
<cover-view style="width: 100%;" class="flex"> |
|
<cover-view class="content_label"> |
|
闲 {{ item.idleNum}} |
|
</cover-view> |
|
<cover-view style="text-align: center;line-height: 26rpx; padding-top: 10rpx;" |
|
class="oneflex flex jc ac"> |
|
￥{{tool.getnum(item.totalFee)}}</cover-view> |
|
</cover-view> |
|
<cover-view class="content_value flex oneflex ac "> |
|
<cover-view class="content_value_price oneflex"> 快 {{item.fastNum}} |
|
</cover-view> |
|
<cover-view class="content_value_price oneflex"> 慢 |
|
{{item.slowNum}}</cover-view> |
|
</cover-view> |
|
</cover-view> |
|
</cover-view> |
|
</block> |
|
</cover-view> |
|
</map> |
|
<station-item :data="stationData" style="position: absolute;bottom: 50rpx;left: 0; right: 0; margin: 0 auto;" |
|
v-if="stationData"></station-item> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
// import { |
|
// page |
|
// } from "@/pages/home/AntiCorruptionLayer.js" |
|
import station from "@/api/station.js" |
|
import utils from "./static/utils.js" |
|
import stationItem from "@/components/stationItem/stationItem.vue" |
|
export default { |
|
name: "ChargingStationMap", |
|
components: { |
|
stationItem |
|
}, |
|
props: { |
|
pageData: { |
|
type: Object, |
|
default: () => null |
|
} |
|
}, |
|
data() { |
|
return { |
|
user: uni.getStorageSync('user'), |
|
showLabelLength: 30, |
|
standbyMarkers: [], |
|
markersTimer: null, |
|
stationData: null, |
|
circles: [], |
|
getListTimer: null, |
|
location: null, |
|
markers: [], |
|
mapContext: null, |
|
isGetRegion: false, |
|
}; |
|
}, |
|
created() { |
|
this.init() |
|
}, |
|
methods: { |
|
onshow() { |
|
let that = this; |
|
this.mapContext.getCenterLocation({ |
|
success(e) { |
|
let { |
|
latitude, |
|
longitude |
|
} = e; |
|
that.getRegion({ |
|
detail: { |
|
centerLocation: { |
|
latitude, |
|
longitude |
|
} |
|
} |
|
}) |
|
} |
|
}) |
|
}, |
|
mapTap() { |
|
this.stationData = null |
|
}, |
|
getDetails(data) { |
|
if(!this.user) { |
|
uni.showToast({ |
|
title: '登陆后可查看', |
|
icon: 'none', |
|
success() { |
|
} |
|
}); |
|
return |
|
} |
|
station.getSiteDetails(data).then(res => { |
|
res.data = [res.data]; |
|
this.tool.difTags(res); |
|
let data = new this.tool.Anticorrosive(res, page); |
|
this.stationData = data.list[0]; |
|
}) |
|
}, |
|
//点击气泡 |
|
callouttap(e) { |
|
try { |
|
let id = this.standbyMarkers.find(item => item.id == e.detail.markerId)['siteId']; |
|
this.getDetails({ |
|
id, |
|
stationLat: this.location.latitude, |
|
stationLng: this.location.longitude, |
|
}) |
|
} catch (e) { |
|
//TODO handle the exception |
|
} |
|
}, |
|
filterMarks(markers) { |
|
if (this.markers.length) { |
|
let idList = this.markers.map(item => item.siteId); |
|
if (this.markers.length >= markers.length) { |
|
return markers.filter(item => !idList.includes(item.id)) |
|
} else { |
|
return markers.filter(item => idList.includes(item.id)) |
|
} |
|
} else { |
|
return null |
|
} |
|
}, |
|
getRegion(e) { |
|
let that = this; |
|
return new Promise((re, rj) => { |
|
this.mapContext.getRegion({ |
|
success: res => { |
|
let juli = utils.getDistance(res.northeast.latitude, res.northeast |
|
.longitude, res.northeast.latitude, res.southwest.longitude); |
|
that.$emit('update:pageData', Object.assign(that.pageData, { |
|
ranger: (juli / 2 / 1000) + 5, |
|
...e.detail.centerLocation |
|
})); |
|
re('success') |
|
}, |
|
fail: (data, code) => { |
|
rj(JSON.stringify(data)) |
|
} |
|
}) |
|
}) |
|
}, |
|
regionchange(e) { |
|
if (e.type == 'end') { |
|
this.getRegion(e).then(res => { |
|
this.getList(1500) |
|
}) |
|
} |
|
}, |
|
markertap(e) { |
|
console.log(e) |
|
}, |
|
//定位处理 |
|
locationProcessing(markerList = []) { |
|
if (markerList && markerList.length) { |
|
let that = this |
|
let newMarkerList = markerList.map((item, index) => { |
|
let id = Number(`${item.id.substr(item.id.length - 9,item.id.length)}`); |
|
let configure = { |
|
siteId: item.id, |
|
id, |
|
width: 20, |
|
height: 20, |
|
latitude: item.stationLat, |
|
longitude: item.stationLng, |
|
iconPath: '../../static/tt.png', |
|
// joinCluster: true, |
|
customCallout: { |
|
anchorY: 0, // Y轴偏移量 |
|
anchorX: 0, // X轴偏移量 |
|
display: 'ALWAYS', // 一直展示 |
|
} |
|
} |
|
let data = Object.assign(JSON.parse(JSON.stringify(item)), configure); |
|
if (markerList.length > this.showLabelLength) delete data.customCallout |
|
return data |
|
}); |
|
return newMarkerList; |
|
} else { |
|
// throw 'markerList.length of 0' |
|
return [] |
|
} |
|
}, |
|
addMarkers(newMarkers) { |
|
this.mapContext.addMarkers({ |
|
markers: newMarkers, |
|
clear: true, |
|
success() { |
|
console.log('添加成功') |
|
}, |
|
fail(err) { |
|
console.log(err, '添加失败') |
|
} |
|
}) |
|
}, |
|
WeightlessnessReduction(array) { |
|
return [...new Set(array)] |
|
}, |
|
//获取列表 |
|
getList(time = 1000) { |
|
let that = this; |
|
if (this.getListTimer) { |
|
clearTimeout(this.getListTimer); |
|
this.getListTimer = null |
|
} |
|
this.getListTimer = setTimeout(() => { |
|
uni.showLoading({ |
|
title: '电站加载中', |
|
mask: true |
|
}); |
|
console.log(this.pageData,'this.pageDatathis.pageDatathis.pageData') |
|
station[this.user?'getMapStations':'getMapTouristSites'](this.pageData).then(res => { |
|
// this.markers = [] |
|
console.log(res, '电站列表') |
|
clearTimeout(this.markersTimer); |
|
this.markersTimer = null; |
|
this.markersTimer = setTimeout(() => { |
|
let newMarkers = this.locationProcessing(res.data) |
|
this.removeMarkers(newMarkers); |
|
this.standbyMarkers = newMarkers; |
|
if (this.standbyMarkers.length > this.showLabelLength) { |
|
this.addMarkers(this.standbyMarkers) |
|
} else { |
|
this.markers = this.standbyMarkers; |
|
} |
|
uni.hideLoading(); |
|
}, 500) |
|
}) |
|
}, time) |
|
}, |
|
removeMarkers(newMarkers) { |
|
let standbyMarkersIds = this.standbyMarkers.length ? this.standbyMarkers.map(item => String(item.id)) : []; |
|
let newMarkersIds = newMarkers.length ? newMarkers.map(item => String(item.id)) : []; |
|
let ids = standbyMarkersIds.filter(item => !newMarkersIds.includes(item)); |
|
// this.markers = [] |
|
this.mapContext.removeMarkers({ |
|
markerIds: ids |
|
}); |
|
// this.mapContext.removeMarkers(); |
|
}, |
|
//获取定位 |
|
async getPosition() { |
|
console.log('位置更行') |
|
let location = uni.getStorageSync('location'); |
|
if (location) { |
|
this.location = uni.getStorageSync('location'); |
|
} else { |
|
this.location = { |
|
longitude: 116.38, |
|
latitude: 39.90, |
|
} |
|
} |
|
// await this.tool.userLocationChenk().then(res => {}).catch(err => {}) |
|
// await this.tool.getLocation().then(res => { |
|
// this.location = uni.getStorageSync('location'); |
|
// }).catch(err => { |
|
// this.location = { |
|
// longitude: 116.38, |
|
// latitude: 39.90, |
|
// } |
|
// }); |
|
}, |
|
moveToLocation(longitude, latitude) { |
|
setTimeout(() => { |
|
this.mapContext.moveToLocation({ |
|
longitude, |
|
latitude, |
|
success() { |
|
console.log('移动成功') |
|
}, |
|
fail(e) { |
|
console.log(e, '移动失败') |
|
}, |
|
}) |
|
}, 500) |
|
}, |
|
//初始化 |
|
async init() { |
|
let that = this; |
|
// await this.getPosition(); |
|
this.mapContext = uni.createMapContext("map_Id", this); |
|
this.$nextTick(() => { |
|
this.onshow() |
|
}) |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import 'index.scss'; |
|
</style> |