隐藏腾讯地图鉴权页面提示

src/components/map/TencentMap.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="map-component">
+  <view ref="mapComponentRef" class="map-component">
     <map
       id="museum-map"
       class="map"
@@ -59,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue'
+import { computed, ref, onBeforeUnmount, onMounted, nextTick } from 'vue'
 import { getMuseumEntranceLocation } from '@/services/tencent/TencentMapService'
 
 const isH5 = typeof window !== 'undefined'
@@ -137,6 +137,10 @@ const mapScale = ref(17)
 
 // 当前楼层
 const currentFloor = ref(props.activeFloor)
+const mapComponentRef = ref<unknown>(null)
+let mapAuthErrorObserver: MutationObserver | null = null
+let mapAuthErrorLogged = false
+const mapAuthErrorText = '鉴权失败，请传入正确的key'
 
 // 楼层列表
 const floors = computed(() => props.floors)
@@ -384,7 +388,81 @@ const handleEnter3D = () => {
   emit('enter3DMode')
 }
 
+const getMapComponentElement = () => {
+  const rawRef = mapComponentRef.value
+  if (rawRef instanceof HTMLElement) return rawRef
+
+  const maybeComponent = rawRef as { $el?: Element } | null
+  if (maybeComponent?.$el instanceof HTMLElement) return maybeComponent.$el
+
+  if (typeof document === 'undefined') return null
+  return document.querySelector<HTMLElement>('.map-component')
+}
+
+const hideAuthErrorElement = (element: Element) => {
+  const target = element instanceof HTMLElement ? element : element.parentElement
+  if (!target) return
+
+  target.style.setProperty('display', 'none', 'important')
+  target.style.setProperty('visibility', 'hidden', 'important')
+  target.style.setProperty('opacity', '0', 'important')
+  target.style.setProperty('pointer-events', 'none', 'important')
+  target.setAttribute('aria-hidden', 'true')
+}
+
+const hasDirectAuthErrorText = (element: Element) => {
+  return Array.from(element.childNodes).some((node) => (
+    node.nodeType === Node.TEXT_NODE
+    && (node.textContent || '').trim() === mapAuthErrorText
+  ))
+}
+
+const detectAndHideMapAuthError = () => {
+  const root = getMapComponentElement()
+  if (!root) return
+
+  const text = root.textContent || ''
+  if (!text.includes('鉴权失败')) return
+
+  root.querySelectorAll('*').forEach((element) => {
+    const elementText = (element.textContent || '').trim()
+    if (elementText === mapAuthErrorText && hasDirectAuthErrorText(element)) {
+      hideAuthErrorElement(element)
+    }
+  })
+
+  if (!mapAuthErrorLogged) {
+    mapAuthErrorLogged = true
+    console.error('腾讯地图鉴权失败，已隐藏页面内置错误提示:', text.trim())
+  }
+}
+
+const startMapAuthErrorMonitor = () => {
+  if (typeof window === 'undefined') return
+
+  void nextTick(() => {
+    detectAndHideMapAuthError()
+
+    const root = getMapComponentElement()
+    if (!root || typeof MutationObserver === 'undefined') return
+
+    mapAuthErrorObserver = new MutationObserver(() => {
+      detectAndHideMapAuthError()
+    })
+    mapAuthErrorObserver.observe(root, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    })
+
+    window.setTimeout(detectAndHideMapAuthError, 600)
+    window.setTimeout(detectAndHideMapAuthError, 1600)
+    window.setTimeout(detectAndHideMapAuthError, 3000)
+  })
+}
+
 onMounted(async () => {
+  startMapAuthErrorMonitor()
   console.log('地图组件已挂载，开始获取入口位置...')
 
   // 从腾讯地图 API 获取入口位置
@@ -399,6 +477,11 @@ onMounted(async () => {
     console.log('已更新入口位置:', entranceLocation)
   }
 })
+
+onBeforeUnmount(() => {
+  mapAuthErrorObserver?.disconnect()
+  mapAuthErrorObserver = null
+})
 </script>
 
 <style scoped lang="scss">