From 75d3320bd3496b980953d79935373a17ece37823 Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期五, 19 十二月 2025 15:08:06 +0800
Subject: [PATCH] 地图修改
---
src/views/bigScreen/components/newMap.vue | 89 ++++++++++++++++++++++++++++++++++++++++++++
src/views/bigScreen/components/screen.vue | 4 +-
2 files changed, 91 insertions(+), 2 deletions(-)
diff --git a/src/views/bigScreen/components/newMap.vue b/src/views/bigScreen/components/newMap.vue
new file mode 100644
index 0000000..82f6fcf
--- /dev/null
+++ b/src/views/bigScreen/components/newMap.vue
@@ -0,0 +1,89 @@
+<template>
+ <div id="amap-container" className="amap-container"></div>
+</template>
+
+<script setup>
+import {ref, onMounted, onUnmounted} from 'vue'
+import AMapLoader from '@amap/amap-jsapi-loader'
+
+// 1. 定义地图实例、点击经纬度、覆盖物存储数组（用于卸载销毁）
+const mapInstance = ref(null)
+let markerInstance = ref(null)
+const clickLngLat = ref({lng: null, lat: null})
+const clickHandler = ref(null)
+const mapOverlays = ref([])
+const IMAGE_URL = '/bigMap2.png'
+const IMAGE_SIZE = [350, 350]
+
+
+// 3. 初始化高德地图 + 绘制覆盖物
+const initAMap = async () => {
+ try {
+ window._AMapSecurityConfig = {
+ securityJsCode: '75ffdb279adfda7feb06d74b3a0352d6',
+ }
+ const AMap = await AMapLoader.load({
+ key: '65cb3e4cbf9f62fd3500cc0f61146cf4',
+ version: '2.0',
+ plugins: ['AMap.MapType']
+ })
+
+ const imageLayer = new AMap.ImageLayer({
+ url:IMAGE_URL,
+ bounds: new AMap.Bounds(
+ [85.114119, 45.594941],
+ [85.122236, 45.600000]
+ ),
+
+ });
+ // 初始化地图
+ mapInstance.value = new AMap.Map('amap-container', {
+ viewMode: "3D",
+ zoom: 15.7,
+ center: [85.119484, 45.597606],
+ resizeEnable: true,
+ layers: [
+ AMap.createDefaultLayer(),
+ imageLayer,
+ ]
+ })
+ mapInstance.value.addControl(new AMap.MapType({defaultType: 1}))
+ } catch (error) {
+ console.error('高德地图加载失败：', error)
+ }
+}
+
+
+// 4. 组件生命周期
+onMounted(() => {
+ initAMap()
+})
+
+onUnmounted(() => {
+ // 销毁地图实例 + 移除点击事件 + 销毁所有覆盖物
+ if (mapInstance.value) {
+ // 移除点击事件
+ if (clickHandler.value) {
+ mapInstance.value.off('click', clickHandler.value)
+ }
+ // 销毁所有覆盖物
+ mapOverlays.value.forEach(overlay => {
+ mapInstance.value.remove(overlay)
+ })
+ // 销毁地图
+ mapInstance.value.destroy()
+ mapInstance.value = null
+ }
+})
+</script>
+
+<style scoped>
+.amap-container {
+ width: 100%;
+ height: 600px;
+}
+
+::v-deep(.amap-ctrl-list-layer) {
+ display: none !important;
+}
+</style>
diff --git a/src/views/bigScreen/components/screen.vue b/src/views/bigScreen/components/screen.vue
index 873cfd6..2cfe82e 100644
--- a/src/views/bigScreen/components/screen.vue
+++ b/src/views/bigScreen/components/screen.vue
@@ -274,7 +274,7 @@
import AMapLoader from '@amap/amap-jsapi-loader'
import { shallowRef } from '@vue/reactivity'
import { storeToRefs } from 'pinia';
-import Map from './map.vue'
+import Map from './newMap.vue'
import {BaiduMap, BmMapType, BmNavigation, BmPolygon, BmGround} from 'vue-baidu-map-3x'
import { useUserInfo } from '/@/stores/userInfo';
import {bigScreenApi} from "/@/api/bigScreen";
@@ -2033,4 +2033,4 @@
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.2