diff --git a/app/components/AMapComponent.vue b/app/components/AMapComponent.vue index a1456bd..b0061a9 100644 --- a/app/components/AMapComponent.vue +++ b/app/components/AMapComponent.vue @@ -17,7 +17,7 @@

地图加载失败

{{ error }}

- +
@@ -27,7 +27,6 @@ import { ref, onMounted, onUnmounted, watch } from 'vue' import { amapConfig, getAMapScriptUrl, validateKeys } from '~/config/amap' - // 组件属性 const props = defineProps({ // 地图中心点坐标 [经度, 纬度] @@ -38,7 +37,7 @@ const props = defineProps({ // 地图缩放级别 zoom: { type: Number, - default: 11 + default: 17 }, // 视图模式：2D 或 3D viewMode: { @@ -49,7 +48,7 @@ const props = defineProps({ // 地图高度 height: { type: String, - default: '400px' + default: '342px' } }) @@ -128,7 +127,6 @@ const initMap = async () => { doubleClickZoom: true, // 是否允许双击缩放 scrollWheel: true, // 是否允许滚轮缩放 touchZoom: true, // 是否允许触摸缩放 - }) // 地图加载完成事件 @@ -352,4 +350,4 @@ onUnmounted(() => { margin: 0 16px; } } - + \ No newline at end of file diff --git a/app/pages/map-demo.vue b/app/pages/map-demo.vue index 210c431..22a4c85 100644 --- a/app/pages/map-demo.vue +++ b/app/pages/map-demo.vue @@ -1,29 +1,16 @@ @@ -35,24 +22,15 @@ import AMapComponent from '~/components/AMapComponent.vue' const mapRef = ref(null) const centerLng = ref(120.258419) const centerLat = ref(27.11402) -const zoomLevel = ref(17) -const viewMode = ref('2D') -const mapStatus = ref('加载中...') -const lastClick = ref(null) -const currentCenter = ref(null) -const currentZoom = ref(17) // 计算属性 const mapCenter = computed(() => [centerLng.value, centerLat.value]) - - - - - // 地图事件处理 const onMapReady = (mapInstance) => { - console.log('地图实例:', mapInstance) - mapStatus.value = '地图加载完成' + // 🔍 调试信息：验证地图实例是否正确传递 + console.log('✅ 地图实例已就绪:', mapInstance) + console.log('📍 当前中心点:', mapInstance?.getCenter?.()) + console.log('🔍 当前缩放级别:', mapInstance?.getZoom?.()) // 添加一个标记点 if (mapRef.value) { @@ -62,219 +40,4 @@ const onMapReady = (mapInstance) => { }) } } - -const onMapClick = (event) => { - lastClick.value = event - console.log('地图点击:', event) -} - -const onZoomChange = (zoom) => { - currentZoom.value = zoom - console.log('缩放级别变化:', zoom) -} - -const onCenterChange = (center) => { - currentCenter.value = center - centerLng.value = center.lng - centerLat.value = center.lat - console.log('中心点变化:', center) -} - -// 更新中心点 -const updateCenter = () => { - // 由于watch监听器会自动更新地图，这里不需要手动调用 - // 只需要确保数据已经更新即可 - console.log('更新中心点到:', mapCenter.value) -} - -// 快速定位 -const goToLocation = (location) => { - console.log('快速定位到:', location.name, location.center) - centerLng.value = location.center[0] - centerLat.value = location.center[1] - zoomLevel.value = location.zoom - // 由于watch监听器会自动更新地图，这里不需要手动调用 -} - -