diff --git a/src/utils/map.js b/src/utils/map.js index 1349184..04cf602 100644 --- a/src/utils/map.js +++ b/src/utils/map.js @@ -1,4 +1,5 @@ import AMapLoader from "@amap/amap-jsapi-loader"; +import markBsPng from "@/assets/images/mark_bs.png"; // 初始化地图 export const loadAMap = async (plugins) => { @@ -27,3 +28,44 @@ export const loadAMap = async (plugins) => { throw new Error("地图创建失败"); } }; + +export const searchPlace = ({ AMap, map, searchPlugin, keyword, events }) => { + if (events.beforeSearch) { + events.beforeSearch(); + } + searchPlugin.search(keyword, (status, result) => { + if (status === "complete") { + const searchResultMarkers = result.poiList.pois.map((el, index) => { + const marker = new AMap.Marker({ + map, + position: el.location, + anchor: "bottom-center", + extData: el, + content: ` +
+ ${index + 1} +
+ `, + }); + // marker.on("mouseover", handleResultHover); + // marker.on("click", handleResultClick); + // marker.on("mouseout", (ev) => { + // resultInfoWindow.value.close(); + // }); + return marker; + }); + map.setFitView(searchResultMarkers); + } + }); +}; diff --git a/src/views/basic/car/info/add.vue b/src/views/basic/car/info/add.vue index c1284bf..0533b9e 100644 --- a/src/views/basic/car/info/add.vue +++ b/src/views/basic/car/info/add.vue @@ -257,6 +257,8 @@ function submitForm() { onMounted(async () => { reset(); if (route.query.carId && route.query.uuid) { + const routerObj = Object.assign({}, route, { title: "车辆修改" }); + tab.updatePage(routerObj); const resp = await getInfo(route.query.carId, route.query.uuid); form.value = { ...resp.data, diff --git a/src/views/basic/driver/info/add.vue b/src/views/basic/driver/info/add.vue index bec19a2..866e14e 100644 --- a/src/views/basic/driver/info/add.vue +++ b/src/views/basic/driver/info/add.vue @@ -212,6 +212,8 @@ function back() { onMounted(async () => { reset(); if (route.query.driverId && route.query.uuid) { + const routerObj = Object.assign({}, route, { title: "司机修改" }); + tab.updatePage(routerObj); const { data } = await getInfo(route.query.driverId, route.query.uuid); form.value = data; } diff --git a/src/views/basic/fence/add.vue b/src/views/basic/fence/add.vue index 0c4f462..2d50cb1 100644 --- a/src/views/basic/fence/add.vue +++ b/src/views/basic/fence/add.vue @@ -31,7 +31,13 @@ >搜索 - 卫星模式 + {{ isSatelliteMode ? "标准模式" : "卫星模式" }}
@@ -125,11 +131,10 @@ import tab from "@/plugins/tab"; import { onMounted } from "vue"; import { useRoute } from "vue-router"; -// import AMapLoader from "@amap/amap-jsapi-loader"; -import { addFence, updateFence, getFence } from "@/api/fence"; +import { loadAMap } from "@/utils/map"; import markBsPng from "@/assets/images/mark_bs.png"; import mapPinPng from "@/assets/images/map-pin.png"; -import { loadAMap } from "@/utils/map"; +import { addFence, updateFence, getFence } from "@/api/fence"; const route = useRoute(); const { proxy } = getCurrentInstance(); @@ -137,9 +142,12 @@ const AMap = shallowRef(null); const map = shallowRef(null); const placeSearch = shallowRef(null); const searchResultMarkers = shallowRef([]); // 搜索结果表笔列表 +const satelliteLayer = shallowRef(null); +const isSatelliteMode = ref(false); const turningPointMarker = shallowRef([]); const resultInfoWindow = shallowRef(null); const fencePolygon = shallowRef(null); + const searchKeyword = ref(""); const data = reactive({ form: {}, @@ -163,17 +171,15 @@ const data = reactive({ const { form, rules } = toRefs(data); -const handleMapClick = (ev) => { +const addFencePath = (lnglat) => { if (map.value.getAllOverlays("polygon").length === 0) { map.value.add(fencePolygon.value); } - - form.value.fencePath.push(ev.lnglat); - + form.value.fencePath.push(lnglat); turningPointMarker.value.push( new AMap.value.Marker({ map: map.value, - position: ev.lnglat, + position: lnglat, content: `
{ const marker = new AMap.value.Marker({ map: map.value, - position: new AMap.value.LngLat(el.location.lng, el.location.lat), + position: el.location, + anchor: "bottom-center", extData: el, content: `
{
`, }); - marker.on("mouseover", handleResultClick); - marker.on("click", handleMapClick); + marker.on("mouseover", handleResultHover); + marker.on("click", handleResultClick); marker.on("mouseout", (ev) => { resultInfoWindow.value.close(); }); @@ -257,6 +273,16 @@ const searchPoint = (val /** 搜索建议选项 */, type) => { } }); }; + +// 搜索结果点击 +const handleResultClick = async (ev) => { + map.value.clearMap(); + searchResultMarkers.value = []; + const lnglat = ev.target.getExtData()?.location; + if (!lnglat) return ElMessage.error("获取经纬度失败"); + addFencePath(lnglat); +}; + /** 提交按钮 */ function submitForm() { proxy.$refs["fenceRef"].validate((valid) => { @@ -281,6 +307,7 @@ function submitForm() { } }); } + // 表单重置 function reset() { form.value = { @@ -310,9 +337,11 @@ onMounted(() => { map.value = new AMap.value.Map("map-container", { zoom: 16, // 缩放级别 center: [117.290345, 31.797813], // 中心点 - city: "合肥", + // city: "合肥", }); + map.value.on("click", handleMapClick); + satelliteLayer.value = new AMap.value.TileLayer.Satellite(); // 地点搜索插件 placeSearch.value = new AMap.value.PlaceSearch({ // map: map.value, @@ -320,11 +349,14 @@ onMounted(() => { }); resultInfoWindow.value = new AMap.value.InfoWindow({ anchor: "bottom-center", + offset: new AMap.value.Pixel(0, -31), }); fencePolygon.value = new AMap.value.Polygon({}); map.value.add(fencePolygon.value); map.value.addControl(new AMap.value.Scale()); if (route.query.fenceId && route.query.uuid) { + const routerObj = Object.assign({}, route, { title: "修改电子围栏" }); + tab.updatePage(routerObj); getFence(route.query.fenceId, route.query.uuid).then((resp) => { form.value = { ...resp.data, @@ -359,3 +391,8 @@ onMounted(() => { } } + diff --git a/src/views/basic/line/RouteStepList.vue b/src/views/basic/line/RouteStepList.vue index 867cc54..093bf92 100644 --- a/src/views/basic/line/RouteStepList.vue +++ b/src/views/basic/line/RouteStepList.vue @@ -144,6 +144,7 @@ const handleRouteClick = (data, index) => { border-bottom: 1px solid #f0f0f0; } .icon { + flex-shrink: 0; margin-right: 8px; width: 20px; height: 20px; diff --git a/src/views/basic/line/add.vue b/src/views/basic/line/add.vue index 82db169..e44c15a 100644 --- a/src/views/basic/line/add.vue +++ b/src/views/basic/line/add.vue @@ -1,6 +1,14 @@