autumn/jsowell-charger-web
1
0
Fork 0
mirror of https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git synced 2026-06-25 01:29:47 +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

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

@@ -1,34 +1,23 @@
<template> <template>
<div class="basics"> <div class="basics">
<div class="mapCont"> <div class="mapCont">
<div> <div style="margin-bottom: 20px">
<el-input <el-input
style="width: 85%" style="width: 85%"
v-model="inputObject.userInput" v-model="inputObject.userInput"
placeholder="请输入你要查找的关键词" placeholder="请输入你要查找的关键词"
type="text" type="text"
@keyup.enter.native="send" @keyup.enter.native="send"
></el-input> ></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> </el-button>
</div> </div>
<div id="container"></div> <!-- <div id="container"></div> -->
</div> <div id="yzMap" style="position: absolute; width: 70%; height: 40%"></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> </div>
</div>
</template> </template>
<script> <script>
@@ -36,202 +25,276 @@ import AMapLoader from "@amap/amap-jsapi-loader";
import { getStation } from "@/api/pile/station.js"; import { getStation } from "@/api/pile/station.js";
import bus from "@/bus/bus"; import bus from "@/bus/bus";
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
import axios from "axios";
window._AMapSecurityConfig = { window._AMapSecurityConfig = {
securityJsCode: "b6b6e07309486e524f9986e1f36a5e28", securityJsCode: "b6b6e07309486e524f9986e1f36a5e28",
}; };
export default { export default {
props: ["stationLat", "stationLng"], props: ["stationLat", "stationLng"],
data() { data() {
return { return {
dialogImageUrl: "", dialogImageUrl: "",
dialogVisible: false, dialogVisible: false,
// headers:{ // headers:{
// Authorization:this.$store.state.user.token // Authorization:this.$store.state.user.token
// }, // },
map: null, map: null,
autoOptions: { autoOptions: {
input: "", input: "",
}, },
inputObject: { inputObject: {
userInput: "", userInput: "",
// inputId: "searchInput", // inputId: "searchInput",
lnglat: "", lnglat: "",
}, },
searchPlaceInput: "", searchPlaceInput: "",
auto: null, auto: null,
placeSearch: "", placeSearch: "",
stationId: this.$route.params.id, stationId: this.$route.params.id,
avatar: "", avatar: "",
}; zoom: 16,
}, timerId: null,
methods: { };
// 点击搜索按钮 },
send() { methods: {
this.searchPlaceInput = this.inputObject.userInput; // 点击搜索按钮
console.log("搜索值", this.searchPlaceInput); send() {
// 向表单 site-info传值 // this.searchPlaceInput = this.inputObject.userInput;
bus.$emit("inp", this.searchPlaceInput); // console.log("搜索值", this.searchPlaceInput);
}, // // 向表单 site-info传值
// queryStationInfo() { // bus.$emit("inp", this.searchPlaceInput);
// getStation(this.stationId).then((response) => { const url = `http://api.tianditu.gov.cn/geocoder?ds={"keyWord":"${this.inputObject.userInput}"}&tk=da94c475e0b4960e6f863d7f2947435c`;
// this.lat = response.data.stationLat; axios
// this.lng = response.data.stationLng; .get(url)
// console.log(this.lat, this.lng); .then((res) => {
// this.initMap(this.lat, this.lng); console.log("成功", res);
// }); //删除标注对象
// }, this.map.clearOverLays();
// 在这里处理点击事件
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);
});
},
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("根据经纬度查询地址失败");
}
});
},
},
mounted() {
//DOM初始化完成进行地图初始化
// this.queryStationInfo()
},
created() {
// this.send();
},
watch: {
searchPlaceInput(newValue) {
if (newValue != null) {
console.log(newValue);
this.placeSearch.search(newValue); this.map.centerAndZoom(
this.map.setZoom(16, true, 1); 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);
});
},
// 在这里处理点击事件
// 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);
// });
// },
// 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() {
// 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);
},
getLngLatService(lat, lng) {
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);
}
})
.catch((error) => {
console.log("失败", error.message);
});
},
},
mounted() {
this.initialize();
},
created() {
// this.send();
},
// watch: {
// searchPlaceInput(newValue) {
// if (newValue != null) {
// console.log(newValue);
// this.placeSearch.search(newValue);
// this.map.setZoom(16, true, 1);
// }
// },
// },
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
#container { #container {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
width: 100%; width: 100%;
height: 90%; height: 90%;
} }
.basics { .basics {
display: flex; display: flex;
height: 500px; height: 500px;
width: 100%; width: 100%;
} }
.mapCont { .mapCont {
width: 50%; width: 50%;
} }
.img { .img {
flex: 1; flex: 1;
margin-left: 100px; margin-left: 100px;
} }
// #search_container { // #search_container {

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

File diff suppressed because it is too large Load Diff