diyici
This commit is contained in:
dt_2916866708
305
components/ChargingStationMap/ChargingStationMap.vue
Normal file
305
components/ChargingStationMap/ChargingStationMap.vue
Normal file
@@ -0,0 +1,305 @@
|
||||
<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>
|
||||
59
components/ChargingStationMap/index.scss
Normal file
59
components/ChargingStationMap/index.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
.ChargingStationMap_body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.ChargingStationMap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.customCallout {
|
||||
width: 218rpx;
|
||||
height: 108rpx;
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
.triangle {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
background-color: #000000;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
transition:rotate(180deg) ;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 87rpx;
|
||||
// background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
.content_value {
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
.content_value_price {
|
||||
color: #000000;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
.content_label {
|
||||
width: 89rpx;
|
||||
padding: 5rpx 5rpx;
|
||||
height: fit-content;
|
||||
background: #476ffa;
|
||||
border-radius: 10rpx 60rpx 60rpx 0rpx;
|
||||
opacity: 1;
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
.customCallout_img {
|
||||
z-index: -1;
|
||||
width: 220rpx;
|
||||
height: 108rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
72
components/ChargingStationMap/static/utils.js
Normal file
72
components/ChargingStationMap/static/utils.js
Normal file
@@ -0,0 +1,72 @@
|
||||
function test() {
|
||||
return 1 + 1
|
||||
}
|
||||
/**
|
||||
* 获取两个经纬度之间的距离
|
||||
* @param lat1 第一点的纬度
|
||||
* @param lng1 第一点的经度
|
||||
* @param lat2 第二点的纬度
|
||||
* @param lng2 第二点的经度
|
||||
* @returns {Number}
|
||||
*/
|
||||
function getRad(d) {
|
||||
var PI = Math.PI;
|
||||
return d * PI / 180.0;
|
||||
}
|
||||
|
||||
function getDistance(lat1, lng1, lat2, lng2) {
|
||||
var f = getRad((lat1 + lat2) / 2);
|
||||
var g = getRad((lat1 - lat2) / 2);
|
||||
var l = getRad((lng1 - lng2) / 2);
|
||||
var sg = Math.sin(g);
|
||||
var sl = Math.sin(l);
|
||||
var sf = Math.sin(f);
|
||||
var s, c, w, r, d, h1, h2;
|
||||
var a = 6378137.0;
|
||||
var fl = 1 / 298.257;
|
||||
sg = sg * sg;
|
||||
sl = sl * sl;
|
||||
sf = sf * sf;
|
||||
s = sg * (1 - sl) + (1 - sf) * sl;
|
||||
c = (1 - sg) * (1 - sl) + sf * sl;
|
||||
w = Math.atan(Math.sqrt(s / c));
|
||||
r = Math.sqrt(s * c) / w;
|
||||
d = 2 * w * a;
|
||||
h1 = (3 * r - 1) / 2 / c;
|
||||
h2 = (3 * r + 1) / 2 / s;
|
||||
s = d * (1 + fl * (h1 * sf * (1 - sg) - h2 * (1 - sf) * sg));
|
||||
// s = s/1000;
|
||||
s = s.toFixed(2); //指定小数点后的位数。
|
||||
return s;
|
||||
}
|
||||
|
||||
function ab2str(buf) {
|
||||
return String.fromCharCode.apply(null, new Uint16Array(buf));
|
||||
}
|
||||
|
||||
function str2ab(str) {
|
||||
var buf = new ArrayBuffer(str.length * 2); // 2 bytes for each char
|
||||
var bufView = new Uint16Array(buf);
|
||||
for (var i = 0, strLen = str.length; i < strLen; i++) {
|
||||
bufView[i] = str.charCodeAt(i);
|
||||
}
|
||||
return buf;
|
||||
}
|
||||
function distance(res){
|
||||
let ALWAYS = [];
|
||||
res.markes.forEach((item,index)=>{
|
||||
let distance = utils.getDistance(res.coordinate.latitude,res.coordinate.longitude,item.latitude, item.longitude);
|
||||
if(distance<1000){
|
||||
ALWAYS.push(index)
|
||||
}
|
||||
});
|
||||
return ALWAYS
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
distance:distance,
|
||||
test: test,
|
||||
ab2str: ab2str,
|
||||
str2ab: str2ab,
|
||||
getDistance: getDistance
|
||||
}
|
||||
Reference in New Issue
Block a user