# 前端面试题：高德地图"我的位置"功能完整实现

## 题目描述

在一个 Vue 3 + 高德地图的微前端子应用中，实现**"我的位置"**功能：用户点击按钮后，地图自动定位到当前设备所在地理位置，并将缩放级别调到 15（街道级）。

```
┌────────────────────────────────┐
│         sub-app-header         │
│  🟢 Vue3 子应用  [首页][关于][地图] │
├────────────────────────────────┤
│                                │
│         🗺️ 高德地图             │
│     （当前在北京天安门）           │
│                                │
├────────────────────────────────┤
│  🗺️ 高德地图   [📍回到默认] [🎯 我的位置] │  ← 点击这个
└────────────────────────────────┘

点击 🎯 我的位置 →
  ① 检测浏览器是否支持定位
  ② 调用浏览器 Geolocation API
  ③ 提取经纬度
  ④ 移动地图中心 → 用户所在位置，zoom = 15
```

**要求：**

1. 在地图实例创建完成后，按钮才可点击（未就绪时 `disabled`）
2. 必须处理：浏览器不支持定位、用户拒绝授权、定位超时等异常
3. 地图实例通过 composable 管理，不能直接在组件中 `new AMap.Map()`
4. 地图需要支持微前端环境（iframe 沙箱），注意权限策略差异

---

## 完整源码解读

### 1. 项目文件结构

```
microapp-vue3/src/
├── config/
│   └── amap.ts              ← JSAPI 密钥、版本、插件列表
├── composables/
│   └── useAmap.ts           ← 地图实例管理（单例加载、生命周期）
├── views/
│   └── MapView.vue          ← 地图页面 + "我的位置" 功能
├── vite-env.d.ts            ← AMap 全局类型声明
├── App.vue                  ← 子应用根组件（header + router-view）
├── main.ts                  ← 微前端生命周期（mount/unmount）
└── router/index.ts          ← 路由定义
```

---

### 2. 配置文件 — 密钥与插件

```ts
// src/config/amap.ts
export const AMAP_JSAPI_KEY = import.meta.env.VITE_AMAP_JSAPI_KEY as string
export const AMAP_VERSION = '2.0'

export const AMAP_PLUGINS = [
  'AMap.Geocoder',         // 地理编码 / 逆地理编码
  'AMap.AutoComplete',     // 输入提示
  'AMap.PlaceSearch',      // 搜索服务
  'AMap.Geolocation',      // ← 定位插件（已加载但当前未使用）
  'AMap.MarkerClusterer',  // 点聚合
] as const
```

**关键细节：** `AMap.Geolocation` 是高德自己的定位插件（基于 IP + 基站），精度低于浏览器原生 GPS。**当前实现选择的是浏览器原生 `navigator.geolocation`，而非高德插件**——这是一个常见的架构决策点（见后文追问）。

---

### 3. 地图 Composable — 实例管理与单例加载

```ts
// src/composables/useAmap.ts

// ① 全局单例 — 避免多次加载 JSAPI 脚本（~600KB）
let amapPromise: Promise<typeof AMap> | null = null
let AMapGlobal: typeof AMap | null = null

export async function loadAMap(): Promise<typeof AMap> {
  if (AMapGlobal) return AMapGlobal       // 缓存命中

  if (!amapPromise) {
    amapPromise = AMapLoader.load({
      key: AMAP_JSAPI_KEY,
      version: AMAP_VERSION,
      plugins: [...AMAP_PLUGINS],
    })
      .then((amap) => {
        AMapGlobal = amap
        return amap
      })
      .catch((err) => {
        amapPromise = null                // ② 失败后可重试
        throw new Error(`高德地图 JSAPI 加载失败: ${err.message}`)
      })
  }
  return amapPromise
}

export function useAmap(options: AMap.MapOptions = {}) {
  const containerRef = ref<HTMLDivElement | null>(null)
  const mapInstance  = shallowRef<AMap.Map | null>(null)  // ③ 浅响应式
  const loading      = ref(false)
  const error        = ref<string | null>(null)

  async function initMap(): Promise<AMap.Map | null> {
    if (!containerRef.value) {
      error.value = '地图容器不存在'
      return null
    }
    loading.value = true
    error.value   = null

    try {
      const AMap = await loadAMap()

      if (mapInstance.value) {
        mapInstance.value.destroy()       // ④ 先销毁旧实例
      }

      const defaultOptions: AMap.MapOptions = {
        center: [116.397428, 39.90923],   // 默认：北京天安门
        zoom: 11,
        viewMode: '3D',
        resizeEnable: true,               // ⑤ 窗口 resize 时自动重绘
      }

      mapInstance.value = new AMap.Map(containerRef.value, {
        ...defaultOptions,
        ...options,                       // ⑥ 调用方可覆盖默认值
      })

      return mapInstance.value
    } catch (err: any) {
      error.value = err.message || '地图初始化失败'
      return null
    } finally {
      loading.value = false
    }
  }

  function destroyMap(): void {
    if (mapInstance.value) {
      mapInstance.value.destroy()
      mapInstance.value = null
    }
  }

  onUnmounted(() => { destroyMap() })     // ⑦ 组件卸载自动清理

  return { containerRef, mapInstance, loading, error, initMap, destroyMap }
}
```

**设计要点：**

| 编号 | 技术点 | 说明 |
|------|--------|------|
| ① | **模块级单例** | `loadAMap()` 的 Promise 缓存在模块作用域，多次调用 `useAmap()` 不会重复下载 JSAPI |
| ② | **失败重试** | catch 中将 `amapPromise` 置 `null`，下一次调用会重新加载 |
| ③ | **`shallowRef`** | 地图实例是复杂第三方对象，不需要深度响应式追踪，`shallowRef` 只在引用变化时触发更新，节省性能 |
| ④ | **销毁旧实例** | 如果多次调用 `initMap()`，先 `destroy()` 再 `new`，避免内存泄漏 |
| ⑤ | **`resizeEnable`** | 容器尺寸变化时自动调用 `resize()`，在 flex 布局中尤其重要 |
| ⑥ | **默认值合并** | 调用方传入的 options 覆盖默认值，支持自定义初始位置和缩放 |
| ⑦ | **生命周期绑定** | `onUnmounted` 确保组件销毁时释放地图资源 |

---

### 4. "我的位置" — 核心实现

```vue
<!-- src/views/MapView.vue -->
<template>
  <div class="map-page">
    <div ref="containerRef" class="map-container"
         :class="{ 'map-hidden': loading || error }" />

    <div class="map-controls">
      <span class="map-title">🗺️ 高德地图</span>
      <div class="map-actions">
        <button @click="resetView" :disabled="!mapInstance">📍 回到默认位置</button>
        <button @click="getCurrentPosition" :disabled="!mapInstance">🎯 我的位置</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, nextTick } from 'vue'
import { useAmap } from '@/composables/useAmap'

const { containerRef, mapInstance, loading, error, initMap } = useAmap({
  center: [116.397428, 39.90923],
  zoom: 12,
  pitch: 30,
})

// ─────────────────────────────────────────
// 地图初始化
// ─────────────────────────────────────────
async function bootstrapMap() {
  const map = await initMap()
  if (map) {
    nextTick(() => { map.resize() })   // flex 布局下修正地图尺寸
  }
}
onMounted(() => { bootstrapMap() })

// ─────────────────────────────────────────
// 📍 回到默认视图
// ─────────────────────────────────────────
function resetView(): void {
  const map = mapInstance.value
  if (!map) return
  map.setCenter([116.397428, 39.90923])
  map.setZoom(12)
}

// ─────────────────────────────────────────
// 🎯 我的位置 — 核心功能
// ─────────────────────────────────────────
function getCurrentPosition(): void {
  // ① 能力检测 — 浏览器是否支持 Geolocation API
  if (navigator.geolocation) {
    // ② 调用原生 API
    navigator.geolocation.getCurrentPosition(
      // ③ 成功回调 — 提取经纬度并移动地图
      (pos) => {
        const { longitude, latitude } = pos.coords
        mapInstance.value?.setCenter([longitude, latitude])
        mapInstance.value?.setZoom(15)
      },
      // ④ 失败回调 — 用户拒绝 / 超时 / 无法获取
      (err) => {
        alert(`定位失败: ${err.message}`)
      }
    )
  } else {
    // ⑤ 完全不支持 — HTTP 环境或老旧浏览器
    alert('浏览器不支持定位')
  }
}
</script>
```

---

## 核心知识点拆解

### 知识点 ①：`navigator.geolocation` vs `AMap.Geolocation`

| 维度 | `navigator.geolocation`（浏览器原生） | `AMap.Geolocation`（高德插件） |
|------|--------------------------------------|-------------------------------|
| **定位来源** | GPS + Wi-Fi + 基站 + IP | IP 定位 + 基站（无 GPS） |
| **精度** | 高（室外可达 5-10 米） | 低（通常 100-500 米） |
| **授权弹窗** | 浏览器原生弹窗（信任度高） | 无弹窗（静默获取） |
| **HTTPS 要求** | **必须 HTTPS** 或 localhost | 无要求 |
| **加载方式** | 浏览器内置，无需加载 | 需加载高德 JSAPI + Geolocation 插件 |
| **使用场景** | "我的位置"精确导航 | 城市级粗略定位、IP 统计 |

**当前代码的架构决策：选择浏览器原生 API**。因为按钮文案是"我的位置"，用户预期是精确的 GPS 定位，而非粗粒度的 IP 定位。

### 知识点 ②：`getCurrentPosition` 的参数与安全策略

```js
navigator.geolocation.getCurrentPosition(success, error, options)
```

**可选的第三个参数 `options`（当前未使用）：**

```js
navigator.geolocation.getCurrentPosition(success, error, {
  timeout: 10000,              // 超时时间（ms），默认 Infinity
  maximumAge: 60000,           // 缓存有效期（ms），0 = 强制重新获取
  enableHighAccuracy: true,    // 高精度模式（启用 GPS），默认 false
})
```

**如果面试者能指出缺失的 `options`，说明有实际落地经验：**

- 不设 `timeout` → 用户在室内可能永远等不到回调
- 不设 `enableHighAccuracy: true` → 浏览器可能只返回 IP 定位，精度很差
- 不设 `maximumAge` → 每次点击都重新定位，没有利用缓存

### 知识点 ③：微前端环境下的 Geolocation 权限

```
主应用 (microapp-main)
  └─ <micro-app name="vue3-app" iframe>
       └─ iframe → 子应用 (microapp-vue3)
```

当子应用运行在 **iframe 沙箱**中时（`subApps.ts` 中 `iframe: true`），`navigator.geolocation` 的行为：

- **Chrome / Edge**：iframe 中的 `getCurrentPosition` 需要 iframe 的 `allow="geolocation"` 属性，否则直接触发错误回调
- **Firefox**：会向上询问用户授权，相对宽松
- **Safari**：iframe 中基本无法获取位置

**主应用需要额外配置 iframe 的 Permissions Policy：**

```html
<!-- 主应用中嵌入子应用的 iframe 需要声明 -->
<iframe allow="geolocation" src="..."></iframe>

<!-- 或通过 HTTP 响应头 -->
Permissions-Policy: geolocation=(self "http://localhost:3001")
```

**当前代码缺少这个配置**——这是一个真实的技术债，也是面试中考察微前端经验的好切入点。

### 知识点 ④：`shallowRef` 的地图实例存储

```ts
const mapInstance = shallowRef<AMap.Map | null>(null)
```

| 对比 | `ref()` | `shallowRef()` |
|------|---------|-----------------|
| 深度追踪 | ✅ 递归追踪内部属性 | ❌ 仅追踪 `.value` 的引用替换 |
| `map.setCenter()` 后 | 触发不必要的重渲染 | **不触发**（引用没变） |
| `map.setZoom()` 后 | 触发不必要的重渲染 | **不触发** |
| 性能 | 差（每次地图操作都 diff） | 好（只有销毁/重建才触发） |

**关键原理：** 地图实例内部状态的变更（平移、缩放、标记点增删）都不应该触发 Vue 的响应式更新——地图自己管理自己的 DOM。`shallowRef` 正是为此场景设计。

### 知识点 ⑤：按钮的 `disabled` 守卫

```html
<button @click="getCurrentPosition" :disabled="!mapInstance">🎯 我的位置</button>
```

**防护链：**

```
mapInstance 为 null（地图未就绪）
  → button disabled → 无法点击 → getCurrentPosition 不会执行
    → 同时函数内部仍有 mapInstance.value?.setCenter() 的 ?. 守卫
```

这是**双重防护**：
1. **UI 层守卫**：`disabled` 阻止用户操作
2. **逻辑层守卫**：`?.` 可选链防止异步竞态（例如在定位回调返回前地图被销毁）

### 知识点 ⑥：异步初始化窗口 — 竞态条件

```
用户操作时间线：
t=0    页面加载，onMounted → initMap() 开始
t=50   initMap 还在加载 JSAPI...
t=100  用户疯狂点击 "我的位置" → 按钮 disabled（mapInstance 为 null） ✅ 被拦截
t=500  initMap 完成，mapInstance 赋值
t=600  用户点击 "我的位置" → getCurrentPosition 执行 ✅ 正常工作
```

**如果没有 `:disabled="!mapInstance"`：**

```
t=100  getCurrentPosition() 中的 mapInstance.value?.setCenter()
       → undefined?.setCenter() 不报错但什么也不做
       → 地图不动，用户困惑
```

---

## 完整调用链路图

```
用户点击 🎯 我的位置
  │
  ├─ button :disabled="!mapInstance"
  │    └─ mapInstance.value 是否为 null？
  │         ├─ null → 按钮灰色，事件不触发  【终止】
  │         └─ 有值 → 继续
  │
  ├─ getCurrentPosition()
  │    │
  │    ├─ ① navigator.geolocation 是否存在？
  │    │    ├─ 不存在 → alert('浏览器不支持定位')  【终止】
  │    │    └─ 存在 → 继续
  │    │
  │    ├─ ② navigator.geolocation.getCurrentPosition(success, error)
  │    │    │
  │    │    ├─ 浏览器弹出授权弹窗："localhost 想要获取您的位置"
  │    │    │    ├─ 用户拒绝 → error({ code: 1, message: "User denied" })
  │    │    │    │    └─ alert('定位失败: User denied Geolocation')  【终止】
  │    │    │    └─ 用户允许 → 浏览器开始获取位置
  │    │    │         ├─ 超时/信号弱 → error({ code: 3, message: "Timeout" })
  │    │    │         │    └─ alert('定位失败: Timeout expired')  【终止】
  │    │    │         └─ 成功 → success(pos)
  │    │    │              │
  │    │    │              ├─ ③ const { longitude, latitude } = pos.coords
  │    │    │              │    └─ pos.coords 还包含：
  │    │    │              │       · accuracy（精度，米）
  │    │    │              │       · altitude（海拔）
  │    │    │              │       · heading（方向角）
  │    │    │              │       · speed（速度，m/s）
  │    │    │              │
  │    │    │              ├─ ④ mapInstance.value?.setCenter([lng, lat])
  │    │    │              │    └─ 地图中心平移到用户位置
  │    │    │              │
  │    │    │              └─ ⑤ mapInstance.value?.setZoom(15)
  │    │    │                   └─ 缩放到街道级（默认 zoom=12 是城市级）
  │    │    │
  │    │    └─ 注意：当前实现没有传 options 参数！
  │    │        建议补充 { timeout, enableHighAccuracy, maximumAge }
```

---

## 考察点汇总

| 层级 | 考察点 | 难度 |
|------|--------|------|
| **API 选型** | `navigator.geolocation` vs `AMap.Geolocation` 的取舍 | ⭐⭐⭐ |
| **响应式** | 为何用 `shallowRef` 而非 `ref` 存储地图实例 | ⭐⭐ |
| **异步安全** | `disabled` + `?.` 双重守卫防止竞态 | ⭐⭐ |
| **单例模式** | JSAPI 加载的模块级缓存与失败重试 | ⭐⭐⭐ |
| **微前端** | iframe 沙箱中 geolocation 的 Permissions Policy | ⭐⭐⭐⭐ |
| **安全策略** | HTTPS 要求、授权弹窗、用户拒绝处理 | ⭐⭐ |
| **生命周期** | `onUnmounted` 销毁地图、`onMounted` 初始化 | ⭐ |
| **错误处理** | 三层 fallback：浏览器不支持 → 授权拒绝 → 超时 | ⭐⭐ |
| **用户体验** | 缺少 loading 状态、缺少定位失败后的降级 UI | ⭐⭐⭐ |

---

## 加分项

- **能说出 `getCurrentPosition` 的 `options` 三个参数及其合理默认值**
- **能指出 iframe 沙箱下 geolocation 需要主应用配合配置 `Permissions-Policy`**
- **能分析为何 `AMap.Geolocation` 已加载却未使用** — 精度不够，不适合"我的位置"场景
- **能提出改进方案**：
  - 优先用 `navigator.geolocation`（高精度），fallback 到 `AMap.Geolocation`（低精度但可用）
  - 定位过程中按钮显示 loading 态（如 spinner + "定位中..."）
  - 定位成功后在地图上添加用户位置标记点（Marker）
  - 用 `watchPosition` 替代 `getCurrentPosition` 实现实时追踪
- **能指出 `pos.coords.accuracy` 可用于在地图上绘制精度圈**

---

## 追问方向

### 追问 1：如果定位失败，如何优雅降级？

**期望回答：**
```
navigator.geolocation（GPS，高精度）
  ↓ 失败/不支持
AMap.Geolocation（IP 定位，低精度，但一定能拿到城市级位置）
  ↓ 也失败
默认位置（北京天安门） + Toast 提示
```

### 追问 2：为什么当前代码没用 `AMap.Geolocation` 却加载了它的插件？

**期望回答：** 这是预留能力。插件列表是静态配置，加载后该功能即可用。如果未来需要定位功能（如 POI 搜索中的"附近"功能），不需要改配置重新加载 JSAPI。代价是首屏多加载 ~15KB 的插件代码——一个有意为之的权衡。

### 追问 3：如果在 Vue 3 的 `watchEffect` 中调用 `map.setCenter()`，会发生什么？

**期望回答：** 如果 `mapInstance` 用 `ref()` 存储，`setCenter` 会改变地图内部状态，Vue 的响应式系统会追踪到这些变化并触发 `watchEffect` 重新执行，形成死循环。`shallowRef` 避免了这个问题。

### 追问 4：微前端 iframe 沙箱中 `navigator.geolocation` 失效的根本原因？

**期望回答：** 浏览器的 Permissions Policy（原 Feature Policy）要求跨域 iframe 必须显式声明 `allow="geolocation"` 属性。`@micro-zoe/micro-app` 的 iframe 沙箱创建的是同源 iframe，但浏览器的权限模型仍然将其视为独立上下文，需要主应用在 `<micro-app>` 标签或框架配置中透传该 permission。