调整合并代码
This commit is contained in:
小小
parent
7a8c8edc0b
commit
ca4fb5cd88
4
ebike-user/package-lock.json
generated
4
ebike-user/package-lock.json
generated
@ -16,7 +16,9 @@
|
|||||||
},
|
},
|
||||||
"node_modules/@dcloudio/uni-ui": {
|
"node_modules/@dcloudio/uni-ui": {
|
||||||
"version": "1.5.7",
|
"version": "1.5.7",
|
||||||
"integrity": "sha512-DugxSIrQrze1FLdUOj9a+JEQ0bHGjnJTcGUK1mN/MivKg7nuKJBRWk5Ipa9sUdoBznX6ndz5h2e7Uao6x1CdCw=="
|
"resolved": "https://registry.npmjs.org/@dcloudio/uni-ui/-/uni-ui-1.5.7.tgz",
|
||||||
|
"integrity": "sha512-DugxSIrQrze1FLdUOj9a+JEQ0bHGjnJTcGUK1mN/MivKg7nuKJBRWk5Ipa9sUdoBznX6ndz5h2e7Uao6x1CdCw==",
|
||||||
|
"license": "Apache-2.0"
|
||||||
},
|
},
|
||||||
"node_modules/crypto-js": {
|
"node_modules/crypto-js": {
|
||||||
"version": "4.2.0",
|
"version": "4.2.0",
|
||||||
|
|||||||
@ -27,12 +27,7 @@
|
|||||||
],
|
],
|
||||||
"subPackages": [{
|
"subPackages": [{
|
||||||
"root": "pages/map",
|
"root": "pages/map",
|
||||||
"pages": [{
|
"pages": [
|
||||||
"path": "map-findbike",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "地图找车"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"path": "map-location",
|
"path": "map-location",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
@ -1,99 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div >
|
|
||||||
<div class="divLowerLeft">
|
|
||||||
<div class="divBtn">
|
|
||||||
<div class="divBtnTitle">
|
|
||||||
<uni-icons custom-prefix="iconfont" type="icon-ebikejia" :color="iconcolor" :size="iconsize"
|
|
||||||
@click="onZoom('out')" />
|
|
||||||
</div>
|
|
||||||
<div class="divBtnTitle">
|
|
||||||
<uni-icons custom-prefix="iconfont" type="icon-ebikejian" :color="iconcolor" :size="iconsize"
|
|
||||||
@click="onZoom('in')" />
|
|
||||||
</div>
|
|
||||||
<div class="divBtnTitle" style="padding-bottom: 10px;" @click="getLocation">
|
|
||||||
<uni-icons custom-prefix="iconfont" type="icon-ebikedingwei2" :color="iconcolor" :size="iconsize" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<map id="mapRef" ref="mapRef" show-location style="width: 100%;height: 100vh;" :scale="scale" :markers="markers"
|
|
||||||
:longitude="mapcenter.longitude" :latitude="mapcenter.latitude"/>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import {
|
|
||||||
onLoad
|
|
||||||
} from "@dcloudio/uni-app";
|
|
||||||
import {
|
|
||||||
ref,onMounted,getCurrentInstance
|
|
||||||
} from "vue";
|
|
||||||
import * as map from "@/utils/map.js";
|
|
||||||
|
|
||||||
const mapRef=ref("mapRef");
|
|
||||||
let oMap=null;
|
|
||||||
const scale=ref(15);
|
|
||||||
const markers=ref();
|
|
||||||
const mapcenter=ref({
|
|
||||||
longitude:"",latitude:""
|
|
||||||
})
|
|
||||||
|
|
||||||
onMounted(()=>{
|
|
||||||
oMap= map.getMap("mapRef",getCurrentInstance());
|
|
||||||
});
|
|
||||||
|
|
||||||
onLoad((option) => {
|
|
||||||
const {longitude:lng,latitude:lat} = option;
|
|
||||||
mapcenter.value={longitude:lng,latitude:lat};
|
|
||||||
const arrPoints=markers.value||[];
|
|
||||||
arrPoints.push(map.addMarker(arrPoints.length,lng,lat,"bike-choose.png"));
|
|
||||||
markers.value=arrPoints;
|
|
||||||
});
|
|
||||||
|
|
||||||
//地图缩放
|
|
||||||
const onZoom = (lx) => {
|
|
||||||
switch (lx) {
|
|
||||||
case "out":
|
|
||||||
scale.value=scale.value+1;
|
|
||||||
break;
|
|
||||||
case "in":
|
|
||||||
scale.value=scale.value-1;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
//定位
|
|
||||||
const getLocation = () => {
|
|
||||||
map.getLoalcation(oMap, (res) => {
|
|
||||||
const {
|
|
||||||
latitude,
|
|
||||||
longitude
|
|
||||||
} = res;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.divLowerLeft {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 100;
|
|
||||||
left: 10px;
|
|
||||||
bottom: 30vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.divBtn {
|
|
||||||
background-color: white;
|
|
||||||
font-size: 12px;
|
|
||||||
border-radius: 5px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
text-align: center;
|
|
||||||
border: 1px solid #80808061;
|
|
||||||
padding: 0px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.divBtnTitle {
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -16,7 +16,7 @@
|
|||||||
onMounted,
|
onMounted,
|
||||||
getCurrentInstance
|
getCurrentInstance
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import * as map from "@/utils/map.js";
|
import * as map from "@/utils/usermap.js";
|
||||||
import {
|
import {
|
||||||
findIndex
|
findIndex
|
||||||
} from "lodash";
|
} from "lodash";
|
||||||
@ -55,7 +55,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
const getLoalcationPoint = () => {
|
const getLoalcationPoint = () => {
|
||||||
map.getLoalcation(oMap, (res) => {
|
map.getLoalcation( (res) => {
|
||||||
const {
|
const {
|
||||||
longitude: lng,
|
longitude: lng,
|
||||||
latitude: lat
|
latitude: lat
|
||||||
@ -63,6 +63,7 @@
|
|||||||
latitude.value = lat;
|
latitude.value = lat;
|
||||||
longitude.value = lng;
|
longitude.value = lng;
|
||||||
changPoint(lng, lat);
|
changPoint(lng, lat);
|
||||||
|
oMap.moveToLocation();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -193,7 +193,7 @@
|
|||||||
latitude,
|
latitude,
|
||||||
longitude
|
longitude
|
||||||
};
|
};
|
||||||
oMap.moveToLocation({})
|
oMap.moveToLocation()
|
||||||
const params = {
|
const params = {
|
||||||
latitude,
|
latitude,
|
||||||
longitude,
|
longitude,
|
||||||
|
|||||||
@ -1,405 +0,0 @@
|
|||||||
import {
|
|
||||||
showModelMessage
|
|
||||||
} from "./tools.js";
|
|
||||||
import * as api from "./api.js";
|
|
||||||
import config from "./config.js";
|
|
||||||
|
|
||||||
const imgPath = config.imgPath;
|
|
||||||
export const sdkKey = 'BECBZ-EJIEQ-LUU5N-B5ISQ-3TLMZ-BXFLG';
|
|
||||||
|
|
||||||
export const getMap = (mapid, instance) => {
|
|
||||||
return uni.createMapContext(mapid, {
|
|
||||||
this: instance.proxy
|
|
||||||
});
|
|
||||||
}
|
|
||||||
//获取当前定位
|
|
||||||
export const getLoalcation = (oMap, success, fail,nomove) => {
|
|
||||||
uni.getLocation({
|
|
||||||
type: 'gcj02', // 返回可以用于 wx.openLocation 的经纬度
|
|
||||||
geocode: true,
|
|
||||||
success(res) {
|
|
||||||
const {
|
|
||||||
latitude,
|
|
||||||
longitude
|
|
||||||
} = res;
|
|
||||||
if(!nomove){
|
|
||||||
moveToLocation(oMap, longitude, latitude);
|
|
||||||
}
|
|
||||||
// if (markers) { //定位
|
|
||||||
// const arrData = markers.value || [];
|
|
||||||
// let index = arrData.findIndex((item) => {
|
|
||||||
// return item.id == 0;
|
|
||||||
// });
|
|
||||||
// index = index == -1 ? arrData.length : index;
|
|
||||||
// arrData[index] = addMarker(0, longitude, latitude, "dw.png");
|
|
||||||
// markers.value = arrData;
|
|
||||||
// }
|
|
||||||
if (success) success({
|
|
||||||
latitude,
|
|
||||||
longitude
|
|
||||||
});
|
|
||||||
},
|
|
||||||
fail(res) {
|
|
||||||
if (fail) fail(res);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
//逆解析地址
|
|
||||||
export const reverseGeocoder = (qqmapsdk, longitude, latitude, success, fail) => {
|
|
||||||
qqmapsdk.reverseGeocoder({
|
|
||||||
location: {
|
|
||||||
latitude: latitude,
|
|
||||||
longitude: longitude
|
|
||||||
},
|
|
||||||
success: (res) => {
|
|
||||||
if (success) success(res.result);
|
|
||||||
},
|
|
||||||
fail: (res) => {
|
|
||||||
if (fail) success(fail);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
//添加点
|
|
||||||
export const addMarker = (id, longitude, latitude, icon) => {
|
|
||||||
return {
|
|
||||||
id: id,
|
|
||||||
latitude,
|
|
||||||
longitude,
|
|
||||||
width: 40,
|
|
||||||
height: 40,
|
|
||||||
zIndex: "100",
|
|
||||||
iconPath: imgPath + "static/map/" + icon
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//添加线
|
|
||||||
export const addLine = (scolor, arrPoint) => {
|
|
||||||
// let scolor = "";
|
|
||||||
// switch (lx) {
|
|
||||||
// case "add":
|
|
||||||
// scolor = "#e50413";
|
|
||||||
// break;
|
|
||||||
// case "edit":
|
|
||||||
// scolor = "#e58b04";
|
|
||||||
// break;
|
|
||||||
// default:
|
|
||||||
// scolor = "#0473e5";
|
|
||||||
// break
|
|
||||||
// }
|
|
||||||
return {
|
|
||||||
points: arrPoint,
|
|
||||||
color: scolor,
|
|
||||||
width: 4
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//添加面
|
|
||||||
export const addPolygon = (scolor, fcolor, arrPolygonsPoits) => {
|
|
||||||
/* let scolor = "",
|
|
||||||
fcolor = "";
|
|
||||||
switch (lx) {
|
|
||||||
case "add":
|
|
||||||
scolor = "#e50413";
|
|
||||||
fcolor = "#f79bac73";
|
|
||||||
break;
|
|
||||||
case "edit":
|
|
||||||
scolor = "#e58b04";
|
|
||||||
fcolor = "#e58b0440";
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
scolor = "#0473e5";
|
|
||||||
fcolor = "#0473e540";
|
|
||||||
break
|
|
||||||
} */
|
|
||||||
return {
|
|
||||||
points: arrPolygonsPoits,
|
|
||||||
fillColor: fcolor,
|
|
||||||
strokeWidth: 3,
|
|
||||||
strokeColor: scolor,
|
|
||||||
zIndex: 11
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//添加圆
|
|
||||||
export const addCirle = (scolor, fcolor, longitude, latitude, radius) => {
|
|
||||||
/* let scolor = "",
|
|
||||||
fcolor = "";
|
|
||||||
switch (lx) {
|
|
||||||
case "add":
|
|
||||||
scolor = "#e50413";
|
|
||||||
fcolor = "#f79bac73";
|
|
||||||
break;
|
|
||||||
case "edit":
|
|
||||||
scolor = "#e58b04";
|
|
||||||
fcolor = "#e58b0440";
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
scolor = "#0473e5";
|
|
||||||
fcolor = "#0473e540";
|
|
||||||
break
|
|
||||||
} */
|
|
||||||
return {
|
|
||||||
latitude,
|
|
||||||
longitude,
|
|
||||||
radius,
|
|
||||||
color: scolor,
|
|
||||||
fillColor: fcolor,
|
|
||||||
strokeWidth: 3
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//绘制多边形
|
|
||||||
export const drawPolygons = (obj, e) => {
|
|
||||||
/* const {
|
|
||||||
detail: {
|
|
||||||
latitude,
|
|
||||||
longitude
|
|
||||||
}
|
|
||||||
} = e;
|
|
||||||
let {
|
|
||||||
markers,
|
|
||||||
polylines,
|
|
||||||
polygons,
|
|
||||||
arrPolygonsPoits,
|
|
||||||
datacicle,
|
|
||||||
circles
|
|
||||||
} = obj
|
|
||||||
if (datacicle) { //移除圆
|
|
||||||
obj.datacicle = null;
|
|
||||||
obj.circles.splice(circles.length - 1, 1);
|
|
||||||
}
|
|
||||||
const len = arrPolygonsPoits.length;
|
|
||||||
arrPolygonsPoits.push({
|
|
||||||
latitude,
|
|
||||||
longitude
|
|
||||||
});
|
|
||||||
switch (len) {
|
|
||||||
case 0:
|
|
||||||
const marker = addMarker("add", 10000, latitude, longitude);
|
|
||||||
markers.push(marker);
|
|
||||||
break;
|
|
||||||
case 1:
|
|
||||||
polylines.push(addLine("add", arrPolygonsPoits));
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
obj.polylines = [];
|
|
||||||
polygons.push(addPolygon("add", arrPolygonsPoits));
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
polygons[polygons.length - 1] = addPolygon("add", arrPolygonsPoits);
|
|
||||||
console.log("333333333333", JSON.stringify(arrPolygonsPoits));
|
|
||||||
break;
|
|
||||||
} */
|
|
||||||
}
|
|
||||||
|
|
||||||
//移至中心点
|
|
||||||
export const moveToLocation = (oMap, longitude, latitude) => {
|
|
||||||
const point = {
|
|
||||||
latitude,
|
|
||||||
longitude
|
|
||||||
}
|
|
||||||
oMap.moveToLocation(point);
|
|
||||||
}
|
|
||||||
|
|
||||||
//站点、停车区
|
|
||||||
export const getRegionData = (arrRegionID, callback) => {
|
|
||||||
if (!arrRegionID || arrRegionID.length == 0) return;
|
|
||||||
const arrMethods = [];
|
|
||||||
arrRegionID.map(regionId => {
|
|
||||||
const params = {
|
|
||||||
regionId
|
|
||||||
};
|
|
||||||
arrMethods.push(api.callOperateApi("ebikeRegion/getRegion", params, "get"));
|
|
||||||
});
|
|
||||||
|
|
||||||
Promise.all(arrMethods).then(res => {
|
|
||||||
const arrCircles = [];
|
|
||||||
const arrPolygons = [];
|
|
||||||
const arrData = [];
|
|
||||||
res.map(item => {
|
|
||||||
const {
|
|
||||||
code,
|
|
||||||
message,
|
|
||||||
data: arrRegion
|
|
||||||
} = item;
|
|
||||||
if (code != 200) return;
|
|
||||||
arrRegion.map(data => {
|
|
||||||
const {
|
|
||||||
regionId,
|
|
||||||
shapeType,
|
|
||||||
radius,
|
|
||||||
points
|
|
||||||
} = data;
|
|
||||||
arrData.push(data);
|
|
||||||
const scolor = "#58d4c0";
|
|
||||||
const fcolor = "#c1f5f1";
|
|
||||||
if (shapeType == 1) {
|
|
||||||
const {
|
|
||||||
longitude: lng,
|
|
||||||
latitude: lat
|
|
||||||
} = points[0];
|
|
||||||
arrCircles.push(addCirle(scolor, fcolor, lng, lat, radius));
|
|
||||||
} else if (shapeType == 2) {
|
|
||||||
const arrPoint = points.map(p => {
|
|
||||||
return {
|
|
||||||
longitude: p.longitude,
|
|
||||||
latitude: p.latitude
|
|
||||||
}
|
|
||||||
})
|
|
||||||
arrPolygons.push(addPolygon(scolor, fcolor, arrPoint));
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
if (callback) callback({
|
|
||||||
arrData,
|
|
||||||
arrCircles,
|
|
||||||
arrPolygons
|
|
||||||
});
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
//获取车辆数据
|
|
||||||
export const getBikeData = (arrRegionID, callback) => {
|
|
||||||
if (!arrRegionID || arrRegionID.length == 0) return;
|
|
||||||
const arrMethods = [];
|
|
||||||
arrRegionID.map(regionId => {
|
|
||||||
const params = {
|
|
||||||
regionId
|
|
||||||
};
|
|
||||||
arrMethods.push(api.callOperateApi("ebikeRegion/getOperationBike", params, "get"));
|
|
||||||
});
|
|
||||||
Promise.all(arrMethods).then(arrRes => {
|
|
||||||
const arrPoints = [];
|
|
||||||
const arrData = [];
|
|
||||||
let icnt = 0;
|
|
||||||
let icnt_0 = 0;
|
|
||||||
let icnt_2 = 0;
|
|
||||||
arrRes.map(res => {
|
|
||||||
const {
|
|
||||||
code,
|
|
||||||
message,
|
|
||||||
data
|
|
||||||
} = res;
|
|
||||||
if (code != 200) {
|
|
||||||
showModelMessage(message);
|
|
||||||
} else {
|
|
||||||
if (data.length > 0) arrData.push(...data);
|
|
||||||
data.map(item => {
|
|
||||||
const {
|
|
||||||
bikeId,
|
|
||||||
longitude,
|
|
||||||
latitude,
|
|
||||||
state,
|
|
||||||
soc
|
|
||||||
} = item;
|
|
||||||
const id = arrPoints.length;
|
|
||||||
if (soc <= 20) {
|
|
||||||
icnt_0++;
|
|
||||||
} else if (soc <= 60) {
|
|
||||||
icnt_2++;
|
|
||||||
} else {
|
|
||||||
icnt++;
|
|
||||||
}
|
|
||||||
arrPoints.push(addMarker_Q(id, item));
|
|
||||||
})
|
|
||||||
}
|
|
||||||
});
|
|
||||||
callback({
|
|
||||||
arrData,
|
|
||||||
arrPoints,
|
|
||||||
icnt,
|
|
||||||
icnt_0,
|
|
||||||
icnt_2
|
|
||||||
});
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
//电量车辆点
|
|
||||||
export function addMarker_Q(id, data) {
|
|
||||||
const {
|
|
||||||
longitude,
|
|
||||||
latitude,
|
|
||||||
soc
|
|
||||||
} = data;
|
|
||||||
let icon = "bike.png";
|
|
||||||
if (soc <= 20) {
|
|
||||||
icon = "bike_0.png";
|
|
||||||
} else if (soc <= 60) {
|
|
||||||
icon = "bike_2.png";
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
id: id,
|
|
||||||
latitude,
|
|
||||||
longitude,
|
|
||||||
width: 40,
|
|
||||||
height: 40,
|
|
||||||
zIndex: "100",
|
|
||||||
iconPath: imgPath + "static/map/" + icon,
|
|
||||||
label: {
|
|
||||||
content: soc + "%",
|
|
||||||
color: "#FFF",
|
|
||||||
anchorY: -30,
|
|
||||||
fontSize: 9,
|
|
||||||
textAlign: "center",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//导航
|
|
||||||
export function direction({
|
|
||||||
qqmapsdk,
|
|
||||||
slng,
|
|
||||||
slat,
|
|
||||||
elng,
|
|
||||||
elat,
|
|
||||||
success,
|
|
||||||
fail
|
|
||||||
}) {
|
|
||||||
const options = {
|
|
||||||
from: {
|
|
||||||
longitude: slng,
|
|
||||||
latitude: slat
|
|
||||||
},
|
|
||||||
to: {
|
|
||||||
longitude: elng,
|
|
||||||
latitude: elat
|
|
||||||
},
|
|
||||||
success: (res) => {
|
|
||||||
|
|
||||||
console.log("111111111111111111",res)
|
|
||||||
const {
|
|
||||||
polyline,
|
|
||||||
distance
|
|
||||||
} = res.result.routes[0];
|
|
||||||
let coors = polyline;
|
|
||||||
for (let i = 2; i < coors.length; i++) {
|
|
||||||
coors[i] = coors[i - 2] + coors[i] / 1000000
|
|
||||||
}
|
|
||||||
let arrPoint = [];
|
|
||||||
for (let i = 0; i < coors.length; i += 2) {
|
|
||||||
arrPoint.push({
|
|
||||||
latitude: coors[i],
|
|
||||||
longitude: coors[i + 1]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const cnt = (distance / 1000).toFixed(2);
|
|
||||||
let sdistance = distance + "m";
|
|
||||||
if (cnt >= 1){
|
|
||||||
sdistance = cnt + "km";
|
|
||||||
}
|
|
||||||
const data = {
|
|
||||||
arrPoint,
|
|
||||||
distance: sdistance
|
|
||||||
}
|
|
||||||
|
|
||||||
if (success) success(data);
|
|
||||||
},
|
|
||||||
fail: (res) => {
|
|
||||||
fail(res);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
qqmapsdk.direction(options);
|
|
||||||
}
|
|
||||||
@ -8,7 +8,13 @@ import {
|
|||||||
|
|
||||||
const imgPath = config.imgPath;
|
const imgPath = config.imgPath;
|
||||||
|
|
||||||
export const sdkKey = 'BECBZ-EJIEQ-LUU5N-B5ISQ-3TLMZ-BXFLG';
|
export const sdkKey = '44FBZ-K4ZC3-NDE33-O6JAE-VN3GO-NDFRQ';
|
||||||
|
|
||||||
|
export function getMap (mapid, instance) {
|
||||||
|
return uni.createMapContext(mapid, {
|
||||||
|
this: instance.proxy
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
//获取当前定位
|
//获取当前定位
|
||||||
export function getLoalcation(success, fail) {
|
export function getLoalcation(success, fail) {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user