xlqx/app/pages/map-demo.vue

<template>
  <div class="map-demo-page">
    <div class="page-header mt-22 mx-auto">
      <h1>高德地图组件演示</h1>
      <p>基于您提供的HTML示例创建的Vue组件</p>
    </div>
    <div class="demo-section">
      <AMapComponent
          ref="mapRef"
          :zoom="17"
          @map-ready="onMapReady"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import AMapComponent from '~/components/AMapComponent.vue'

// 响应式数据
const mapRef = ref(null)
const centerLng = ref(120.258419)
const centerLat = ref(27.11402)

// 计算属性
const mapCenter = computed(() => [centerLng.value, centerLat.value])
// 地图事件处理
const onMapReady = (mapInstance) => {
  // 🔍 调试信息：验证地图实例是否正确传递
  console.log('✅ 地图实例已就绪:', mapInstance)
  console.log('📍 当前中心点:', mapInstance?.getCenter?.())
  console.log('🔍 当前缩放级别:', mapInstance?.getZoom?.())

  // 添加一个标记点
  if (mapRef.value) {
    mapRef.value.addMarker(mapCenter.value, {
      title: '当前位置',
      content: '<div style="background: #007bff; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">创特物联</div>'
    })
  }
}
</script>