高德地图接入
This commit is contained in:
332
src/views/MapView.vue
Normal file
332
src/views/MapView.vue
Normal file
@@ -0,0 +1,332 @@
|
||||
<template>
|
||||
<div class="map-page">
|
||||
<!-- 地图初始化加载/错误状态 -->
|
||||
<div v-if="loading" class="map-status">⏳ 地图加载中...</div>
|
||||
<div v-else-if="error" class="map-status map-error">❌ {{ error }}</div>
|
||||
|
||||
<!-- 定位进行中提示 -->
|
||||
<div v-if="locating" class="map-status map-locating">
|
||||
{{ locatingSource === 'amap' ? '📡 基站/IP 定位中...' : '🛰️ GPS 定位中...' }}
|
||||
</div>
|
||||
|
||||
<!-- 地图容器 -->
|
||||
<div
|
||||
ref="containerRef"
|
||||
class="map-container"
|
||||
:class="{ 'map-hidden': loading || error }"
|
||||
/>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="map-controls">
|
||||
<span class="map-title">
|
||||
🗺️ 高德地图
|
||||
<span v-if="locatingSourceLabel" class="locate-badge">{{ locatingSourceLabel }}</span>
|
||||
</span>
|
||||
<div class="map-actions">
|
||||
<button @click="resetView" :disabled="!mapInstance || locating">📍 回到默认位置</button>
|
||||
<button
|
||||
@click="locate"
|
||||
:disabled="!mapInstance || locating"
|
||||
class="btn-locate"
|
||||
>
|
||||
<span v-if="locating" class="spinner" />
|
||||
{{ locating ? '定位中...' : '🎯 我的位置' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, nextTick } from 'vue'
|
||||
import { useAmap, loadAMap } from '@/composables/useAmap'
|
||||
|
||||
const { containerRef, mapInstance, loading, error, initMap } = useAmap({
|
||||
center: [116.397428, 39.90923], // 北京天安门
|
||||
zoom: 12,
|
||||
pitch: 30,
|
||||
})
|
||||
|
||||
void containerRef
|
||||
|
||||
// ─────────────────────────────────────────
|
||||
// 定位状态
|
||||
// ─────────────────────────────────────────
|
||||
const locating = ref(false)
|
||||
const locatingSource = ref<'gps' | 'amap' | ''>('')
|
||||
const locatingSourceLabel = ref('')
|
||||
|
||||
// ─────────────────────────────────────────
|
||||
// 地图初始化
|
||||
// ─────────────────────────────────────────
|
||||
async function bootstrapMap() {
|
||||
const map = await initMap()
|
||||
if (map) {
|
||||
nextTick(() => map.resize())
|
||||
}
|
||||
}
|
||||
onMounted(() => bootstrapMap())
|
||||
|
||||
// ─────────────────────────────────────────
|
||||
// 📍 回到默认视图
|
||||
// ─────────────────────────────────────────
|
||||
function resetView(): void {
|
||||
locatingSourceLabel.value = ''
|
||||
const map = mapInstance.value
|
||||
if (!map) return
|
||||
map.setCenter([116.397428, 39.90923])
|
||||
map.setZoom(12)
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────
|
||||
// 🎯 我的位置 — 双通道定位
|
||||
// ─────────────────────────────────────────
|
||||
async function locate(): Promise<void> {
|
||||
if (locating.value || !mapInstance.value) return
|
||||
|
||||
locating.value = true
|
||||
|
||||
// ── 通道 1：浏览器原生 GPS（高精度，需 HTTPS / localhost）──
|
||||
const gpsResult = await tryBrowserGPS()
|
||||
if (gpsResult) {
|
||||
applyLocation(gpsResult.lng, gpsResult.lat, 16, '🛰️ GPS')
|
||||
locating.value = false
|
||||
return
|
||||
}
|
||||
|
||||
// ── 通道 2：高德 IP / 基站定位（低精度，但无需用户授权）──
|
||||
const amapResult = await tryAmapGeolocation()
|
||||
if (amapResult) {
|
||||
applyLocation(amapResult.lng, amapResult.lat, 14, '📡 IP定位')
|
||||
locating.value = false
|
||||
return
|
||||
}
|
||||
|
||||
// ── 通道 3：完全失败 ──
|
||||
locating.value = false
|
||||
alert('无法获取您的位置，请检查浏览器定位权限或网络连接')
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────
|
||||
// 通道 1：浏览器原生 Geolocation API
|
||||
// ─────────────────────────────────────────
|
||||
function tryBrowserGPS(): Promise<{ lng: number; lat: number } | null> {
|
||||
return new Promise((resolve) => {
|
||||
if (!navigator.geolocation) {
|
||||
console.log('[定位] 浏览器不支持 Geolocation API，降级到高德定位')
|
||||
resolve(null)
|
||||
return
|
||||
}
|
||||
|
||||
locatingSource.value = 'gps'
|
||||
console.log('[定位] 🛰️ 尝试浏览器 GPS 定位...')
|
||||
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(pos) => {
|
||||
const { longitude: lng, latitude: lat, accuracy } = pos.coords
|
||||
console.log(`[定位] ✅ GPS 成功 — 经度:${lng} 纬度:${lat} 精度:${accuracy}米`)
|
||||
resolve({ lng, lat })
|
||||
},
|
||||
(err) => {
|
||||
// GeolocationPositionError.code:
|
||||
// 1 = PERMISSION_DENIED（用户拒绝）
|
||||
// 2 = POSITION_UNAVAILABLE（信号不可用）
|
||||
// 3 = TIMEOUT（超时）
|
||||
const reason = ['', '用户拒绝授权', '信号不可用', '定位超时'][err.code] || err.message
|
||||
console.log(`[定位] ❌ GPS 失败 (${reason})，降级到高德定位`)
|
||||
resolve(null)
|
||||
},
|
||||
{
|
||||
timeout: 8000, // 8 秒超时
|
||||
enableHighAccuracy: true, // 强制启用 GPS 芯片
|
||||
maximumAge: 60000, // 允许 60 秒内的缓存（避免每次冷启动 GPS）
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────
|
||||
// 通道 2：高德 IP / 基站定位
|
||||
// ─────────────────────────────────────────
|
||||
async function tryAmapGeolocation(): Promise<{ lng: number; lat: number } | null> {
|
||||
try {
|
||||
const AMap = await loadAMap()
|
||||
locatingSource.value = 'amap'
|
||||
console.log('[定位] 📡 尝试高德 IP 定位...')
|
||||
|
||||
return new Promise((resolve) => {
|
||||
const geolocation = new AMap.Geolocation({
|
||||
enableHighAccuracy: true, // 混合定位（优先 GPS → Wi-Fi → 基站 → IP）
|
||||
timeout: 6000,
|
||||
panToLocation: false, // 我们自己控制地图移动
|
||||
})
|
||||
|
||||
geolocation.getCurrentPosition((status, result) => {
|
||||
if (status === 'complete' && result.position) {
|
||||
const { lng, lat } = result.position
|
||||
console.log(
|
||||
`[定位] ✅ 高德定位成功 — 经度:${lng} 纬度:${lat}`
|
||||
+ ` 地址:${result.formattedAddress} 精度:${result.accuracy}米`
|
||||
)
|
||||
resolve({ lng, lat })
|
||||
} else {
|
||||
console.log(`[定位] ❌ 高德定位失败: ${result.message}`)
|
||||
resolve(null)
|
||||
}
|
||||
})
|
||||
})
|
||||
} catch (err: any) {
|
||||
console.log(`[定位] ❌ 高德定位插件加载失败: ${err.message}`)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────
|
||||
// 将定位结果应用到地图
|
||||
// ─────────────────────────────────────────
|
||||
function applyLocation(lng: number, lat: number, zoom: number, label: string): void {
|
||||
const map = mapInstance.value
|
||||
if (!map) return
|
||||
map.setZoomAndCenter(zoom, [lng, lat])
|
||||
locatingSourceLabel.value = label
|
||||
|
||||
// 3 秒后自动隐藏标签
|
||||
setTimeout(() => {
|
||||
if (locatingSourceLabel.value === label) {
|
||||
locatingSourceLabel.value = ''
|
||||
}
|
||||
}, 3000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ============================================================
|
||||
地图页面布局：header(48px) | map(剩余) | controls(52px)
|
||||
============================================================ */
|
||||
|
||||
.map-page {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ---- 状态提示（加载/错误/定位中）---- */
|
||||
.map-status {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 10;
|
||||
padding: 14px 24px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.map-error {
|
||||
color: #e74c3c;
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
.map-locating {
|
||||
color: #2d6cdf;
|
||||
background: rgba(232, 240, 255, 0.95);
|
||||
border: 1px solid #93c5fd;
|
||||
}
|
||||
|
||||
/* ---- 地图容器 ---- */
|
||||
.map-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.map-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* ---- 底部操作栏 ---- */
|
||||
.map-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 52px;
|
||||
padding: 0 20px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);
|
||||
flex-shrink: 0;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.map-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 定位来源标签 */
|
||||
.locate-badge {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
background: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.map-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.map-actions button {
|
||||
padding: 7px 18px;
|
||||
border: 1px solid #42b883;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
color: #42b883;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.map-actions button:hover:not(:disabled) {
|
||||
background: #42b883;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.map-actions button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 定位按钮 loading 动画 */
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 2px solid transparent;
|
||||
border-top-color: currentColor;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user