diff --git a/src/utils/map.js b/src/utils/map.js index 04cf602..b859b29 100644 --- a/src/utils/map.js +++ b/src/utils/map.js @@ -29,6 +29,19 @@ export const loadAMap = async (plugins) => { } }; +export const getGPSPosition = (options) => + new Promise((resolve, reject) => { + navigator.geolocation.getCurrentPosition( + (result) => { + resolve(result); + }, + (error) => { + reject(error); + }, + options + ); + }); + export const searchPlace = ({ AMap, map, searchPlugin, keyword, events }) => { if (events.beforeSearch) { events.beforeSearch(); diff --git a/src/views/basic/line/add.vue b/src/views/basic/line/add.vue index e44c15a..f735b86 100644 --- a/src/views/basic/line/add.vue +++ b/src/views/basic/line/add.vue @@ -254,13 +254,14 @@ import tab from "@/plugins/tab"; import { onMounted, watch } from "vue"; import { useRoute } from "vue-router"; -import { loadAMap } from "@/utils/map"; +import { getGPSPosition, loadAMap } from "@/utils/map"; import { ElMessage, ElMessageBox, ElOption, ElSelect } from "element-plus"; import endPng from "@/assets/images/end.png"; import RouteStepList from "./RouteStepList.vue"; import startPng from "@/assets/images/start.png"; import markBsPng from "@/assets/images/mark_bs.png"; import { addLine, getLine, updateLine } from "@/api/line/line"; +import { resolve } from "path"; const route = useRoute(); const AMap = shallowRef(null); @@ -742,11 +743,13 @@ onMounted(async () => { "AMap.AutoComplete", "AMap.Geocoder", // "AMap.TruckDriving", - ]).then((_AMap) => { + ]).then(async (_AMap) => { AMap.value = _AMap; + map.value = new AMap.value.Map("map-container", { zoom: 16, // 缩放级别 center: [117.290345, 31.797813], // 中心点 + // center, // city: "合肥", }); window.mapinstance = map.value; diff --git a/src/views/basic/site/add.vue b/src/views/basic/site/add.vue index 45d497a..1526af0 100644 --- a/src/views/basic/site/add.vue +++ b/src/views/basic/site/add.vue @@ -185,8 +185,17 @@ const searchPoint = (val /** 搜索建议选项 */, type) => { `, }); - marker.on("mouseover", () => {}); - marker.on("click", handleMapClick); + marker.on("mouseover", (ev) => { + resultInfoWindow.value.setContent(` +
+ ${ev.target.getExtData().name}
+ `); + resultInfoWindow.value.open(map.value, [ + ev.lnglat.lng, + ev.lnglat.lat, + ]); + }); + marker.on("click", handleResultClick); marker.on("mouseout", (ev) => { resultInfoWindow.value.close(); }); @@ -197,6 +206,21 @@ const searchPoint = (val /** 搜索建议选项 */, type) => { }); }; +// 搜索结果点击 +const handleResultClick = async (ev) => { + const lnglat = ev.target.getExtData()?.location; + if (!lnglat) return ElMessage.error("获取经纬度失败"); + let address; + try { + address = ev.target.getExtData()?.name ?? (await regeoCode(lnglat)); + } catch (error) { + address = `${lnglat.lng},${lnglat.lat}`; + } + open.value = true; + form.value.coordinate = `${lnglat.lng},${lnglat.lat}`; + form.value.address = address; +}; + function back() { reset(); tab.closeOpenPage({ path: "/basic/site" });