地图修改

zhouwx

2 天以前 75d3320bd3496b980953d79935373a17ece37823

地图修改

 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>

 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>
</style>