44 lines
1.2 KiB
Vue
44 lines
1.2 KiB
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>
|