test
This commit is contained in:
parent
28bfbc242c
commit
7b96d7254d
|
|
@ -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) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user