This commit is contained in:
WindowBird 2025-10-29 16:26:51 +08:00
parent 28bfbc242c
commit 7b96d7254d

View File

@ -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"
:center="mapCenter"
:zoom="zoomLevel"
:view-mode="viewMode"
height="500px"
@map-ready="onMapReady"
@map-click="onMapClick"
@zoom-change="onZoomChange"
@center-change="onCenterChange"
ref="mapRef"
:center="mapCenter"
:zoom="17"
height="342px"
@map-ready="onMapReady"
/>
</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) => {