v1.0

app/components/AMapComponent.vue

@@ -24,15 +24,16 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue'
 import { amapConfig, getAMapScriptUrl, validateKeys } from '~/config/amap'
 
+
 // 组件属性
 const props = defineProps({
   // 地图中心点坐标 [经度, 纬度]
   center: {
     type: Array,
-    default: () => [117.397428, 31.90923] // 默认武汉坐标
+    default: () => [120.258419, 27.11402]
   },
   // 地图缩放级别
   zoom: {
@@ -115,7 +116,7 @@ const initMap = async () => {
       viewMode: props.viewMode, // 2D 或 3D 模式
       zoom: props.zoom, // 初始化地图层级
       center: props.center, // 初始化地图中心点
-      mapStyle: 'amap://styles/normal', // 地图样式
+
       features: ['bg', 'road', 'building', 'point'], // 显示要素
       showLabel: true, // 显示标注
       resizeEnable: true, // 是否监控地图容器尺寸变化
@@ -127,7 +128,7 @@ const initMap = async () => {
       doubleClickZoom: true, // 是否允许双击缩放
       scrollWheel: true, // 是否允许滚轮缩放
       touchZoom: true, // 是否允许触摸缩放
-      mapStyle: 'amap://styles/normal' // 地图样式
+
     })
 
     // 地图加载完成事件
@@ -202,6 +203,30 @@ defineExpose({
   }
 })
 
+// 监听props变化，更新地图
+watch(() => props.center, (newCenter) => {
+  if (map.value && newCenter) {
+    console.log('地图中心点更新:', newCenter)
+    map.value.setCenter(newCenter)
+  }
+}, { deep: true })
+
+watch(() => props.zoom, (newZoom) => {
+  if (map.value && newZoom) {
+    console.log('地图缩放级别更新:', newZoom)
+    map.value.setZoom(newZoom)
+  }
+})
+
+watch(() => props.viewMode, (newViewMode) => {
+  if (map.value && newViewMode) {
+    console.log('地图视图模式更新:', newViewMode)
+    // 高德地图的视图模式需要在初始化时设置，运行时无法直接切换
+    // 如果需要切换视图模式，需要重新创建地图实例
+    console.warn('视图模式需要在初始化时设置，当前版本不支持运行时切换')
+  }
+})
+
 // 生命周期
 onMounted(() => {
   initMap()

app/pages/index/index.vue

@@ -85,7 +85,7 @@
                 <p class="text-gray-600 text-lg">多种方式联系我们，我们随时为您服务</p>
               </div>
 
-              <div class="grid lg:grid-cols-12 gap-8 items-start">
+              <div class="grid lg:grid-cols-12 gap-8 items-center">
                 <!-- 联系方式卡片 -->
                 <div class="col-span-12 lg:col-span-5">
                   <div class="bg-white rounded-xl shadow-lg p-8">
@@ -110,11 +110,14 @@
                 <div class="col-span-12 lg:col-span-7">
                   <div class="bg-white rounded-xl shadow-lg p-6">
                     <h3 class="text-2xl font-semibold text-gray-800 mb-6 text-center">公司位置</h3>
-                    <img
+                    <AMapComponent
-                        alt="公司位置地图 - 福建省福鼎市太姥山镇海埕路13号"
+                        ref="mapRef"
-                        class="w-full rounded-lg shadow-md"
+                        :center="mapCenter"
-                        src="/img/map.png"
+                        :zoom="17"
-                    >
+
+                        height="342px"
+                        @map-ready="onMapReady"
+                    />
                     <div class="mt-4 text-center">
                       <p class="text-gray-600">
                         <UIcon name="i-lucide-map-pin" class="w-5 h-5 inline mr-2 text-blue-500" />
@@ -138,6 +141,40 @@
 </template>
 <script setup lang="ts">
 // SEO优化配置
+import AMapComponent from "~/components/AMapComponent.vue";
+import {computed, ref} from 'vue'
+const mapRef = ref(null)
+const centerLng = ref(120.25834)
+const centerLat = ref(27.114063)
+
+const mapStatus = ref('加载中...')
+
+const mapCenter = computed(() => [centerLng.value, centerLat.value])
+const onMapReady = (mapInstance) => {
+  console.log('地图实例:', mapInstance)
+  mapStatus.value = '地图加载完成'
+
+  // 添加一个标记点
+  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;
+      text-align: center;
+      transform: translate(-50%, -50%);
+      position: relative;
+      left: 50%;
+      top: 50%;
+    ">创特物联</div>
+  `
+    })
+  }
+}
 useHead({
   title: '小鹿骑行',
   meta: [

app/pages/map-demo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="map-demo-page">
-    <div class="page-header">
+    <div class="page-header mt-12">
       <h1>高德地图组件演示</h1>
       <p>基于您提供的HTML示例创建的Vue组件</p>
     </div>
@@ -112,7 +112,7 @@ const viewMode = ref('2D')
 const mapStatus = ref('加载中...')
 const lastClick = ref(null)
 const currentCenter = ref(null)
-const currentZoom = ref(11)
+const currentZoom = ref(17)
 
 // 计算属性
 const mapCenter = computed(() => [centerLng.value, centerLat.value])
@@ -147,7 +147,7 @@ const onMapReady = (mapInstance) => {
   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>'
+      content: '<div style="background: #007bff; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">创特物联</div>'
     })
   }
 }
@@ -171,21 +171,18 @@ const onCenterChange = (center) => {
 
 // 更新中心点
 const updateCenter = () => {
-  if (mapRef.value) {
+  // 由于watch监听器会自动更新地图，这里不需要手动调用
-    mapRef.value.setCenter(mapCenter.value)
+  // 只需要确保数据已经更新即可
-  }
+  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监听器会自动更新地图，这里不需要手动调用
-  if (mapRef.value) {
-    mapRef.value.setCenter(location.center)
-    mapRef.value.setZoom(location.zoom)
-  }
 }
 </script>