Vue3项目集成高德地图API实现高精度定位【超详细傻瓜式教程】

前言

本教程将手把手教您在Vue3项目中接入高德地图，实现精确定位功能。每一步都配有截图说明，零基础也能轻松上手。

一、环境准备

1.1 确保安装了Node.js

访问 Node.js官网
下载并安装长期支持版(LTS)
打开命令行工具，输入以下命令验证安装：

node -v
npm -v

1.2 创建Vue3项目

打开命令行，进入您想创建项目的目录
运行以下命令创建项目：

npm create vue@latest

按照提示配置项目：

✓ Project name: … my-map-project
✓ Add TypeScript? … No
✓ Add JSX Support? … No
✓ Add Vue Router? … Yes
✓ Add Pinia? … No
✓ Add Vitest? … No
✓ Add ESLint? … Yes
✓ Add Prettier? … Yes

cd my-map-project
npm install

二、获取高德开发者密钥

2.1 注册开发者账号

访问高德开放平台
点击右上角"注册"按钮
填写必要信息完成注册
登录账号

2.2 创建应用

登录后点击"控制台"
选择"应用管理" -> “创建新应用”
填写应用名称（如：我的地图应用）
选择"Web端(JS API)"
保存获取Key

三、项目配置

3.1 安装高德地图依赖

npm install @amap/amap-jsapi-loader --save

3.2 配置vite.config.js

import {
    
     defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    
    
  plugins: [vue()],
  server: {
    
    
    host: true,
    port: 8080,
    proxy: {
    
    
      '/api': {
    
    
        target: 'https://restapi.amap.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

四、代码实现

4.1 创建地图组件

在 src/components 目录下创建 AMapLocation.vue：

<template>
  <div class="map-container">
    <div id="container" class="map"></div>
    <div class="location-info" v-if="locationInfo">
      <p>经度：{
    
    {
    
     locationInfo.lng }}</p>
      <p>纬度：{
    
    {
    
     locationInfo.lat }}</p>
      <p>精确度：{
    
    {
    
     locationInfo.accuracy }}米</p>
    </div>
  </div>
</template>

<script setup>
import {
    
     onMounted, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

const map = ref(null)
const marker = ref(null)
const locationInfo = ref(null)

onMounted(() => {
    
    
  initMap()
})

const initMap = async () => {
    
    
  try {
    
    
    const AMap = await AMapLoader.load({
    
    
      key: '您的高德地图Key', // 替换为您申请的key
      version: '2.0',
      plugins: ['AMap.Geolocation']
    })

    // 创建地图实例
    map.value = new AMap.Map('container', {
    
    
      zoom: 15,
      center: [116.397428, 39.90923]
    })

    // 创建定位对象
    const geolocation = new AMap.Geolocation({
    
    
      enableHighAccuracy: true,
      timeout: 10000,
      buttonPosition: 'RB',
      buttonOffset: new AMap.Pixel(10, 20),
      zoomToAccuracy: true
    })

    map.value.addControl(geolocation)

    // 获取定位
    geolocation.getCurrentPosition((status, result) => {
    
    
      if (status === 'complete') {
    
    
        const {
    
     position, accuracy } = result
        
        // 更新位置信息
        locationInfo.value = {
    
    
          lng: position.lng,
          lat: position.lat,
          accuracy: accuracy
        }

        // 添加标记点
        marker.value = new AMap.Marker({
    
    
          position: position,
          map: map.value
        })

        // 添加定位精度圈
        const circle = new AMap.Circle({
    
    
          center: position,
          radius: accuracy,
          fillOpacity: 0.2,
          strokeWeight: 1
        })
        map.value.add(circle)
        
        // 移动地图中心点
        map.value.setCenter(position)
      } else {
    
    
        alert('定位失败，请检查定位权限！')
      }
    })
  } catch (e) {
    
    
    console.error('地图加载失败：', e)
    alert('地图加载失败，请检查网络连接！')
  }
}
</script>

<style scoped>
.map-container {
    
    
  position: relative;
  width: 100%;
  height: 100%;
}

.map {
    
    
  width: 100%;
  height: 500px;
}

.location-info {
    
    
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
</style>

4.2 在页面中使用组件

修改 src/views/Home.vue：

<template>
  <div class="home">
    <h1>高德地图定位示例</h1>
    <AMapLocation />
  </div>
</template>

<script setup>
import AMapLocation from '@/components/AMapLocation.vue'
</script>

<style scoped>
.home {
    
    
  padding: 20px;
}

h1 {
    
    
  text-align: center;
  margin-bottom: 20px;
}
</style>

五、常见问题解决

5.1 地图无法显示

检查以下几点：

Key是否正确配置
是否已在高德开放平台添加安全域名
网络连接是否正常

5.2 定位不准确

确保浏览器已授权定位权限
检查是否启用了enableHighAccuracy选项
在手机浏览器上效果会更好

5.3 跨域问题

确保vite.config.js中正确配置了代理

六、效果展示

完成以上步骤后，运行项目：

npm run dev

访问 http://localhost:8080 即可看到效果：

地图自动定位到当前位置
显示定位点标记
显示定位精度圈
左上角显示具体经纬度信息

补充说明

1. 安全域名配置

登录高德开放平台
应用管理 -> 您的应用 -> 设置
添加以下域名：
- 开发环境：localhost
- 生产环境：您的实际域名

2. 生产环境注意事项

确保使用HTTPS协议
部署前替换为生产环境的Key
做好错误处理和加载提示

3. 优化建议

添加加载动画
增加重试机制
适配移动端显示
添加更多地图控件

本教程到此结束，如有问题欢迎在评论区讨论！

目录

前言