autumn/jsowell-charger-web
1
0
Fork 0
mirror of https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git synced 2026-07-14 02:58:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

替换高德方法 使用天地图

Browse Source
This commit is contained in:
BOOL\25024
2024-08-15 09:09:26 +08:00
parent c6efbab693
commit 4abeb8ee68
2 changed files with 782 additions and 768 deletions
Download Patch File Download Diff File Expand all files Collapse all files

335
jsowell-ui/src/components/MapContainer/MapContainer.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="basics">
<div class="mapCont">
<div>
<div style="margin-bottom: 20px">
<el-input
style="width: 85%"
v-model="inputObject.userInput"
@@ -9,25 +9,14 @@
type="text"
@keyup.enter.native="send"
></el-input>
<el-button style="width: 85px" type="primary" @click="send"
<el-button style="width: 85px; margin-left: 20px" type="primary" @click="send"
>搜索
</el-button>
</div>
<div id="container"></div>
<!-- <div id="container"></div> -->
<div id="yzMap" style="position: absolute; width: 70%; height: 40%"></div>
</div>
<!-- <div class="img">-->
<!-- <el-input-->
<!-- placeholder="请选择图片"-->
<!-- style="width: 50%"-->
<!-- type="file"-->
<!-- @change="onFileChange"-->
<!-- ref="iptRef"-->
<!-- ></el-input-->
<!-- >-->
<!--&lt;!&ndash; <el-button style="width: 85px">上传图片</el-button>&ndash;&gt;-->
<!-- </div>-->
</div>
</template>
@@ -36,6 +25,7 @@ import AMapLoader from "@amap/amap-jsapi-loader";
import { getStation } from "@/api/pile/station.js";
import bus from "@/bus/bus";
import { getToken } from "@/utils/auth";
import axios from "axios";
window._AMapSecurityConfig = {
securityJsCode: "b6b6e07309486e524f9986e1f36a5e28",
@@ -63,151 +53,224 @@ export default {
placeSearch: "",
stationId: this.$route.params.id,
avatar: "",
zoom: 16,
timerId: null,
};
},
methods: {
// 点击搜索按钮
send() {
this.searchPlaceInput = this.inputObject.userInput;
console.log("搜索值", this.searchPlaceInput);
// 向表单 site-info传值
bus.$emit("inp", this.searchPlaceInput);
// this.searchPlaceInput = this.inputObject.userInput;
// console.log("搜索值", this.searchPlaceInput);
// // 向表单 site-info传值
// bus.$emit("inp", this.searchPlaceInput);
const url = `http://api.tianditu.gov.cn/geocoder?ds={"keyWord":"${this.inputObject.userInput}"}&tk=da94c475e0b4960e6f863d7f2947435c`;
axios
.get(url)
.then((res) => {
console.log("成功", res);
//删除标注对象
this.map.clearOverLays();
this.map.centerAndZoom(
new T.LngLat(res.data.location.lon, res.data.location.lat),
this.zoom
);
var marker = new T.Marker(
new T.LngLat(res.data.location.lon, res.data.location.lat)
);
//向地图上添加标注
this.map.addOverLay(marker);
})
.catch((error) => {
console.log("失败", error.message);
this.$modal.msgError(error.message);
});
},
// queryStationInfo() {
// getStation(this.stationId).then((response) => {
// this.lat = response.data.stationLat;
// this.lng = response.data.stationLng;
// console.log(this.lat, this.lng);
// this.initMap(this.lat, this.lng);
queryStationInfo() {
getStation(this.stationId).then((response) => {
this.lat = response.data.stationLat;
this.lng = response.data.stationLng;
console.log(this.lat, this.lng);
this.initMap(this.lat, this.lng);
});
},
// 在这里处理点击事件
// handleSearchResultClick(data) {
// // console.log(data); // 你可以在控制台打印点击结果的数据
// let lat = data.entr_location.lat;
// let lng = data.entr_location.lng;
// this.getLngLatService(lat, lng);
// },
// initMap() {
// // console.log(lat, lng);
// AMapLoader.load({
// key: "ba9123dd736bce40f30b52f7c0beebc1", // 申请好的Web端开发者Key，首次调用 load 时必填
// version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
// plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
// })
// .then((AMap) => {
// this.map = new AMap.Map("container", {
// //设置地图容器id
// viewMode: "3D", //是否为3D地图模式
// zoom: 15, //初始化地图级别
// center: [+this.stationLng, +this.stationLat], //初始化地图中心点位置
// });
// // this.map.addControl(new AMap.Geolocation());
// // console.log("map", this.map);
// // 设置鼠标的样式
// this.map.setDefaultCursor("pointer");
// // 点标记
// let marker = new AMap.Marker({
// position: new AMap.LngLat(+this.stationLng, +this.stationLat),
// });
// // 将创建的点标记添加到已有的地图实例
// this.map.add(marker);
// AMap.plugin("AMap.AutoComplete", function () {
// let auto = new AMap.AutoComplete(this.autoOptions);
// //构造地点查询类
// auto.on("select", this.select);
// });
// this.placeSearch = new AMap.PlaceSearch({
// map: this.map,
// });
// // 点击搜索结果的回调函数
// this.placeSearch.on("markerClick", (e) => {
// // 在此处处理点击事件
// this.handleSearchResultClick(e.data);
// });
// // 逆向地理编码 -> 要正向地理编码
// this.map.on("click", (e) => {
// let lat = e.lnglat.lat;
// let lng = e.lnglat.lng;
// this.getLngLatService(lat, lng);
// // let lnglat = [lng, lat];
// // console.log("经纬度", lnglat);
// });
// marker.on("click", (e) => {
// let lat = e.lnglat.lat;
// let lng = e.lnglat.lng;
// this.getLngLatService(lat, lng);
// });
// })
// .catch((e) => {
// console.log(e);
// });
// },
// 在这里处理点击事件
handleSearchResultClick(data) {
// console.log(data); // 你可以在控制台打印点击结果的数据
let lat = data.entr_location.lat;
let lng = data.entr_location.lng;
this.getLngLatService(lat, lng);
// select(e) {
// this.placeSearch.search(e.poi.name); //关键字查询查询
// },
// //逆向地理编码服务
// getLngLatService(lat, lng) {
// let pos = [lng, lat];
// let lnglat = new AMap.LngLat(lng, lat);
// let geocoder = new AMap.Geocoder({
// // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
// city: "全国",
// });
// //1.点击地图任意位置生成一个marker
// // let marker = new AMap.Marker({
// // position: new AMap.LngLat(lng, lat),
// // });
// // this.map.add(marker);
// // 移除已创建的marker
// // this.map.remove(marker);
// // let address = "";
// //2.将位置转化为坐标点-->地理信息
// //3.根据地理信息（地址）进行搜索获取详细信息！
// geocoder.getAddress(lnglat, (status, result) => {
// if (status === "complete" && result.regeocode) {
// // console.log("geocoder.getAddress result", result);
// let address = result.regeocode.formattedAddress;
// let adcode = result.regeocode.addressComponent.adcode;
// let res = {
// pos: pos,
// address: address,
// adcode: adcode,
// };
// // console.log("res", res);
// bus.$emit("res", res);
// //需求：固定的窗体信息进行展示！
// } else {
// console.log("根据经纬度查询地址失败");
// // log.error("根据经纬度查询地址失败");
// }
// });
// },
initialize() {
console.log(this.stationLng, this.stationLat);
setTimeout(() => {
this.map = new T.Map("yzMap");
//设置显示地图的中心点和级别
this.map.centerAndZoom(new T.LngLat(this.stationLng, this.stationLat), this.zoom);
//创建标注对象
var marker = new T.Marker(new T.LngLat(this.stationLng, this.stationLat));
//向地图上添加标注
this.map.addOverLay(marker);
this.map.checkResize();
this.addMapClick();
}, 2000);
},
initMap() {
// console.log(lat, lng);
AMapLoader.load({
key: "ba9123dd736bce40f30b52f7c0beebc1", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [
"AMap.AutoComplete",
"AMap.PlaceSearch",
"AMap.Geocoder",
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
this.map = new AMap.Map("container", {
//设置地图容器id
viewMode: "3D", //是否为3D地图模式
zoom: 15, //初始化地图级别
center: [+this.stationLng, +this.stationLat], //初始化地图中心点位置
});
// this.map.addControl(new AMap.Geolocation());
// console.log("map", this.map);
// 设置鼠标的样式
this.map.setDefaultCursor("pointer");
// 点标记
let marker = new AMap.Marker({
position: new AMap.LngLat(
+this.stationLng,
+this.stationLat
),
});
// 将创建的点标记添加到已有的地图实例
this.map.add(marker);
AMap.plugin("AMap.AutoComplete", function () {
let auto = new AMap.AutoComplete(this.autoOptions);
//构造地点查询类
auto.on("select", this.select);
});
this.placeSearch = new AMap.PlaceSearch({
map: this.map,
});
// 点击搜索结果的回调函数
this.placeSearch.on("markerClick", (e) => {
// 在此处处理点击事件
this.handleSearchResultClick(e.data);
});
// 逆向地理编码 -> 要正向地理编码
this.map.on("click", (e) => {
let lat = e.lnglat.lat;
let lng = e.lnglat.lng;
this.getLngLatService(lat, lng);
// let lnglat = [lng, lat];
// console.log("经纬度", lnglat);
});
marker.on("click", (e) => {
let lat = e.lnglat.lat;
let lng = e.lnglat.lng;
this.getLngLatService(lat, lng);
});
})
.catch((e) => {
// this.map = new T.Map("yzMap");
// this.map.centerAndZoom(new T.LngLat(this.center.lng, this.center.lat), this.zoom);
},
addMapClick() {
this.removeMapClick(); // 移除已存在的点击事件监听器（如果有）
this.map.addEventListener("click", this.mapClick);
},
removeMapClick() {
this.map.removeEventListener("click", this.mapClick);
},
mapClick(e) {
console.log(e);
});
let lng = e.lnglat.getLng();
let lat = e.lnglat.getLat();
this.getLngLatService(lat, lng);
},
select(e) {
this.placeSearch.search(e.poi.name); //关键字查询查询
},
//逆向地理编码服务
getLngLatService(lat, lng) {
let pos = [lng, lat];
let lnglat = new AMap.LngLat(lng, lat);
let geocoder = new AMap.Geocoder({
// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
city: "全国",
});
//1.点击地图任意位置生成一个marker
// let marker = new AMap.Marker({
// position: new AMap.LngLat(lng, lat),
// });
// this.map.add(marker);
// 移除已创建的marker
// this.map.remove(marker);
// let address = "";
//2.将位置转化为坐标点-->地理信息
//3.根据地理信息（地址）进行搜索获取详细信息！
geocoder.getAddress(lnglat, (status, result) => {
if (status === "complete" && result.regeocode) {
// console.log("geocoder.getAddress result", result);
let address = result.regeocode.formattedAddress;
let adcode = result.regeocode.addressComponent.adcode;
let res = {
pos: pos,
address: address,
adcode: adcode,
};
// console.log("res", res);
console.log(lat, lng);
//删除标注对象
this.map.clearOverLays();
//创建标注对象
var marker = new T.Marker(new T.LngLat(lng, lat));
this.map.addOverLay(marker);
const url = `http://api.tianditu.gov.cn/geocoder?postStr={lon:${lng},lat:${lat},ver:1}&type=geocode&tk=da94c475e0b4960e6f863d7f2947435c`;
axios
.get(url)
.then((res) => {
console.log("成功", res);
if (res.data) {
bus.$emit("res", res);
//需求：固定的窗体信息进行展示！
} else {
console.log("根据经纬度查询地址失败");
// log.error("根据经纬度查询地址失败");
}
})
.catch((error) => {
console.log("失败", error.message);
});
},
},
mounted() {
//DOM初始化完成进行地图初始化
// this.queryStationInfo()
this.initialize();
},
created() {
// this.send();
},
watch: {
searchPlaceInput(newValue) {
if (newValue != null) {
console.log(newValue);
// watch: {
// searchPlaceInput(newValue) {
// if (newValue != null) {
// console.log(newValue);
this.placeSearch.search(newValue);
this.map.setZoom(16, true, 1);
}
},
},
// this.placeSearch.search(newValue);
// this.map.setZoom(16, true, 1);
// }
// },
// },
};
</script>

169
jsowell-ui/src/views/pile/station/components/SiteInfo.vue
View File

@@ -38,7 +38,6 @@
:options="options"
v-model="areaCodeList"
@change="handleChange"
disabled
>
</el-cascader>
</el-form-item>
@@ -58,11 +57,7 @@
<el-row :gutter="24">
<el-col :span="6">
<el-form-item prop="matchCars" label="适配车辆类型">
<el-select
v-model="station.selectMatchCars"
multiple
placeholder="请选择"
>
<el-select v-model="station.selectMatchCars" multiple placeholder="请选择">
<el-option
v-for="item in dict.type.match_cars"
:key="item.value"
@@ -74,10 +69,7 @@
</el-col>
<el-col :span="6">
<el-form-item prop="publicFlag" label="是否对外开放">
<el-select
v-model="station.publicFlag"
placeholder="请选择"
>
<el-select v-model="station.publicFlag" placeholder="请选择">
<el-option
v-for="item in publicFlagOptions"
:key="item.value"
@@ -90,10 +82,7 @@
</el-col>
<el-col :span="6">
<el-form-item prop="openFlag" label="是否营业中">
<el-select
v-model="station.openFlag"
placeholder="请选择"
>
<el-select v-model="station.openFlag" placeholder="请选择">
<el-option
v-for="item in openFlagOptions"
:key="item.value"
@@ -108,9 +97,7 @@
<el-form-item prop="merchantAdminName" label="管理员">
<el-input
:value="
station.merchantAdminName === null
? '无'
: station.merchantAdminName
station.merchantAdminName === null ? '无' : station.merchantAdminName
"
></el-input>
</el-form-item>
@@ -120,38 +107,25 @@
<el-row :gutter="24">
<el-col :span="6">
<el-form-item prop="stationLng" label="经度">
<el-input
v-model="station.stationLng"
disabled
></el-input>
<el-input v-model="station.stationLng" disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="stationLat" label="纬度">
<el-input
v-model="station.stationLat"
disabled
></el-input>
<el-input v-model="station.stationLat" disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="merchantName" label="运营商">
<el-input
:value="
station.merchantName === null
? '无'
: station.merchantName
"
:value="station.merchantName === null ? '无' : station.merchantName"
disabled
></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="stationType" label="站点类型">
<el-select
v-model="station.stationType"
placeholder="请选择"
>
<el-select v-model="station.stationType" placeholder="请选择">
<el-option
v-for="item in dict.type.station_type"
:key="item.value"
@@ -166,10 +140,7 @@
<el-row :gutter="24">
<el-col :span="6">
<el-form-item prop="construction" label="建设场所">
<el-select
v-model="station.construction"
placeholder="请选择"
>
<el-select v-model="station.construction" placeholder="请选择">
<el-option
v-for="item in dict.type.construction_type"
:key="item.value"
@@ -182,11 +153,7 @@
<el-col :span="6">
<el-form-item prop="electricityPrice" label="充电费率">
<el-input
:value="
station.electricityPrice === null
? 0
: station.electricityPrice
"
:value="station.electricityPrice === null ? 0 : station.electricityPrice"
disabled
></el-input>
</el-form-item>
@@ -194,11 +161,7 @@
<el-col :span="6">
<el-form-item prop="servicePrice" label="服务费率">
<el-input
:value="
station.servicePrice === null
? 0
: station.servicePrice
"
:value="station.servicePrice === null ? 0 : station.servicePrice"
disabled
></el-input>
</el-form-item>
@@ -210,50 +173,36 @@
</el-col>
<el-col :span="6">
<el-form-item prop="parkingNumber" label="停车场库编号">
<el-input
v-model="station.parkingNumber"
required="true"
></el-input>
<el-input v-model="station.parkingNumber" required="true"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="parkFeeDescribe" label="停车费率描述">
<el-input
v-model="station.parkFeeDescribe"
required="true"
></el-input>
<el-input v-model="station.parkFeeDescribe" required="true"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="accountNumber" label="国网电费账单户号" label-width="130px">
<el-input
v-model="station.accountNumber"
required="true"
></el-input>
<el-input v-model="station.accountNumber" required="true"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="capacity" label="容量">
<el-input
v-model="station.capacity"
required="true"
></el-input>
<el-input v-model="station.capacity" required="true"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="operatorName" label="运营商品牌名称" label-width="130px">
<el-input
v-model="station.operatorName"
required="true"
></el-input>
<el-input v-model="station.operatorName" required="true"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item prop="amapStationName" label="推送高德充电站名称描述" label-width="170px">
<el-input
v-model="station.amapStationName"
required="true"
></el-input>
<el-form-item
prop="amapStationName"
label="推送高德充电站名称描述"
label-width="170px"
>
<el-input v-model="station.amapStationName" required="true"></el-input>
</el-form-item>
</el-col>
</el-row>
@@ -349,9 +298,7 @@ export default {
trigger: "blur",
},
],
address: [
{ required: true, message: "请输入地址", trigger: "blur" },
],
address: [{ required: true, message: "请输入地址", trigger: "blur" }],
stationTel: [
{
required: true,
@@ -373,18 +320,12 @@ export default {
trigger: "blur",
},
],
openFlag: [
{ required: true, message: "是否营业中", trigger: "blur" },
],
openFlag: [{ required: true, message: "是否营业中", trigger: "blur" }],
// merchantAdminName: [
// { required: true, message: "请输入管理员", trigger: "blur" },
// ],
stationLng: [
{ required: true, message: "请输入经度", trigger: "blur" },
],
stationLat: [
{ required: true, message: "请输入纬度", trigger: "blur" },
],
stationLng: [{ required: true, message: "请输入经度", trigger: "blur" }],
stationLat: [{ required: true, message: "请输入纬度", trigger: "blur" }],
// merchantId: [
// { required: true, message: "请输入管理员", trigger: "blur" },
// ],
@@ -426,6 +367,10 @@ export default {
},
fileList: [], // 用于图片回显
// dialogVisible: null,
station: {
areaCode: "1,2,3", // 初始值
},
selectedAreaCode: [],
};
},
created() {},
@@ -464,11 +409,7 @@ export default {
// 将canvas画布中的内容转换为Blob对象
canvas.toBlob(
(blob) => {
const compressedFile = new File(
[blob],
file.name,
{ type: blob.type }
);
const compressedFile = new File([blob], file.name, { type: blob.type });
resolve(compressedFile);
},
@@ -499,8 +440,9 @@ export default {
console.log(this.dialogImageUrl);
this.dialogVisible = true;
},
handleChange() {
console.log("111");
handleChange(e) {
this.station.areaCode = e.join(",");
console.log(e, this.station.areaCode);
},
// 渲染表格数据
async queryStationInfo() {
@@ -538,26 +480,30 @@ export default {
mounted() {
// 接收map 地图传过来的搜索值
bus.$on("res", (data) => {
// console.log("data", data); // data就是它传过来的值
console.log("data", data.data.result); // data就是它传过来的值
this.station.address = data.data.result.formatted_address;
this.station.stationLng = data.data.result.location.lon;
this.station.stationLat = data.data.result.location.lat;
// console.log("原始this.station", this.station);
// 地址
// this.detailedAddress = data.address;
// console.log("详细地址", data.address);
var adcode = data.adcode;
var areaCode = [];
areaCode[0] = adcode.substr(0, 2) + "0000";
areaCode[1] = adcode.substr(0, 4) + "00";
areaCode[2] = adcode;
// console.log("拼装的areaCode", areaCode);
// 修改数据
this.station.areaCode = areaCode.join(",");
this.station.stationLng = String(data.pos[0]);
this.station.stationLat = String(data.pos[1]);
// console.log("修改后this.station", this.station);
console.log(data.address, "data.address");
this.station.address = data.address.includes("区")
? data.address.replace(/区/, " ").split(" ")[1]
: data.address;
// var adcode = data.adcode;
// var areaCode = [];
// areaCode[0] = adcode.substr(0, 2) + "0000";
// areaCode[1] = adcode.substr(0, 4) + "00";
// areaCode[2] = adcode;
// // console.log("拼装的areaCode", areaCode);
// // 修改数据
// this.station.areaCode = areaCode.join(",");
// this.station.stationLng = String(data.pos[0]);
// this.station.stationLat = String(data.pos[1]);
// // console.log("修改后this.station", this.station);
// console.log(data.address, "data.address");
// this.station.address = data.address.includes("区")
// ? data.address.replace(/区/, " ").split(" ")[1]
// : data.address;
// 优化之后
// let newAddress2 = this.detailedAddress
// .replace(/(?<=[省市区])/g, "$&,")
@@ -568,9 +514,14 @@ export default {
});
},
computed: {
areaCodeList() {
areaCodeList: {
get() {
return this.station.areaCode.split(",");
},
set(val) {
console.log(val);
},
},
pictureList() {
var pictureList = [];
for (let i = 0; i < this.fileList.length; i++) {