### Vue3 中集成
高德地图 API
获取当前定位
在 Vue3 项目中集成
高德地图以
获取用户的
当前位置，可以通过以下方式实现。此过程涉及注册高德开发者账号、引入
高德地图 JavaScript SDK 并使用 `AMap.Geolocation`
插件完成
定位功能。
#### 1. 注册高德开发者账号并申请 Key
为了能够正常使用
高德地图的服务，首先需要前往高德开放平台注册成为开发者，并创建应用以获得专属的 API 密钥[^1]。该密钥将在后续加载
高德地图 JS 文件时被指定。
#### 2. 加载
高德地图 JS 库
通过动态加载的方式，在 Vue 组件内部引入
高德地图的
JavaScript SDK。以下是基于 Promise 的异步加载函数示例：
```
javascript
export default function MapLoader(key) {
return new Promise((resolve, reject) => {
if (window.AMap) {
resolve(window.AMap);
} else {
const script = document.createElement('script');
script.type = 'text/
javascript';
script.async = true;
script.src = `https://webapi.amap.com/maps?v=1.4.15&key=${key}&callback=initAMap`;
script.onerror = reject;
document.head.appendChild(script);
}
window.initAMap = () => {
resolve(window.AMap);
};
});
}
```
上述代码片段定义了一个名为 `MapLoader` 的工具函数用于按需加载
高德地图库文件[^4]。
#### 3. 使用 AMap.Geolocation 进行
定位
当成功初始化
高德地图实例后，调用其内置
插件 `AMap.Geolocation` 来请求设备的
位置信息。下面是一个完整的 Vue3 组件案例演示如何操作这一流程：
```vue
<template>
<div id="mapContainer" style="width: 100%; height: 400px;"></div>
</template>
<script>
import { onMounted } from "vue";
import MapLoader from "./utils/MapLoader";
export default {
setup() {
let mapInstance;
async function initMapAndLocate() {
try {
// 替换为自己的
高德地图 key
const AMap = await MapLoader("your_amap_api_key_here");
mapInstance = new AMap.Map("mapContainer", {
zoom: 12,
});
const geolocationPlugin = new AMap.Geolocation({
enableHighAccuracy: true, // 是否启用高精度
定位，默认:true
timeout: 10000, // 超过10秒后停止
定位，默认：无穷大
maximumAge: 0 //
定位结果缓存0毫秒，默认：0
});
mapInstance.addControl(geolocationPlugin);
geolocationPlugin.
getCurrentPosition(function(status, result){
if (status === 'complete') {
console.log("用户
位置:", result.position); // 输出纬经度对象
}else{
console.error("
定位失败");
}
});
} catch (error) {
console.error(error.message || error);
}
}
onMounted(() => {
initMapAndLocate();
});
return {};
},
};
</script>
```
以上代码展示了如何在一个简单的 Vue3 单文件组件里设置好地图容器并通过 `AMap.Geolocation` 执行精确
定位[^3]。
---
###
在Chrome、火狐和安卓WebView等浏览器中，由于国内服务限制，Geolocation.getCurrentPosition获取当前位置常常失败。建议尝试使用Edge或Safari，它们对定位服务的兼容性更好。另外，可以考虑用geolocation.getCityInfo作为替代方案。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
