test

app/pages/map-demo.vue

@@ -8,94 +8,22 @@
     <div class="demo-section">
       <h2>基础地图</h2>
       <div class="map-controls">
-        <div class="control-group">
-          <label>中心点坐标：</label>
-          <input 
-            v-model="centerLng" 
-            type="number" 
-            step="0.000001" 
-            placeholder="经度"
-            class="coord-input"
-          />
-          <input 
-            v-model="centerLat" 
-            type="number" 
-            step="0.000001" 
-            placeholder="纬度"
-            class="coord-input"
-          />
-          <button @click="updateCenter" class="update-btn">更新中心点</button>
-        </div>
-        
-        <div class="control-group">
-          <label>缩放级别：</label>
-          <input 
-            v-model.number="zoomLevel" 
-            type="range" 
-            min="3" 
-            max="18" 
-            class="zoom-slider"
-          />
-          <span class="zoom-value">{{ zoomLevel }}</span>
-        </div>
-
-        <div class="control-group">
-          <label>视图模式：</label>
-          <select v-model="viewMode" class="view-select">
-            <option value="2D">2D模式</option>
-            <option value="3D">3D模式</option>
-          </select>
-        </div>
       </div>
 
       <AMapComponent
-        ref="mapRef"
+          ref="mapRef"
-        :center="mapCenter"
+          :center="mapCenter"
-        :zoom="zoomLevel"
+          :zoom="17"
-        :view-mode="viewMode"
+
-        height="500px"
+          height="342px"
-        @map-ready="onMapReady"
+          @map-ready="onMapReady"
-        @map-click="onMapClick"
+
-        @zoom-change="onZoomChange"
-        @center-change="onCenterChange"
       />
     </div>
 
-    <div class="demo-section">
-      <h2>地图事件信息</h2>
-      <div class="event-info">
-        <div class="info-item">
-          <strong>地图状态：</strong>
-          <span :class="mapStatusClass">{{ mapStatus }}</span>
-        </div>
-        <div class="info-item" v-if="lastClick">
-          <strong>最后点击位置：</strong>
-          <span>{{ lastClick.lng.toFixed(6) }}, {{ lastClick.lat.toFixed(6) }}</span>
-        </div>
-        <div class="info-item" v-if="currentCenter">
-          <strong>当前中心点：</strong>
-          <span>{{ currentCenter.lng.toFixed(6) }}, {{ currentCenter.lat.toFixed(6) }}</span>
-        </div>
-        <div class="info-item">
-          <strong>当前缩放级别：</strong>
-          <span>{{ currentZoom }}</span>
-        </div>
-      </div>
-    </div>
 
-    <div class="demo-section">
+
-      <h2>快速定位</h2>
+
-      <div class="quick-locations">
-        <button 
-          v-for="location in quickLocations" 
-          :key="location.name"
-          @click="goToLocation(location)"
-          class="location-btn"
-        >
-          {{ location.name }}
-        </button>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -117,26 +45,9 @@ const currentZoom = ref(17)
 // 计算属性
 const mapCenter = computed(() => [centerLng.value, centerLat.value])
 
-const mapStatusClass = computed(() => {
-  switch (mapStatus.value) {
-    case '地图加载完成':
-      return 'status-success'
-    case '加载中...':
-      return 'status-loading'
-    default:
-      return 'status-error'
-  }
-})
 
-// 快速定位城市
+
-const quickLocations = [
+
-  { name: '北京', center: [116.397428, 39.90923], zoom: 10 },
-  { name: '上海', center: [121.473701, 31.230416], zoom: 10 },
-  { name: '广州', center: [113.264385, 23.129163], zoom: 10 },
-  { name: '深圳', center: [114.085947, 22.547], zoom: 10 },
-  { name: '武汉', center: [112.397428, 31.90923], zoom: 11 },
-  { name: '成都', center: [104.066541, 30.572269], zoom: 10 }
-]
 
 // 地图事件处理
 const onMapReady = (mapInstance) => {