Vue3 集成高德地图：实现定位效果

高德地图作为国内领先的地图服务商，提供了丰富的地理信息能力和API接口。结合 Vue3 的响应式特性与组件化开发模式，可以快速构建高性能的地图应用。本文将手把手教你如何在 Vue3 项目中集成高德地图，并实现定位功能。

一、前期准备

1. 注册高德开发者账号

• 访问 高德开放平台，注册账号并完成实名认证。

• 创建应用，选择「Web端(JS API)」，获取 API Key 和安全密钥。

2. 创建 Vue3 项目

npm create vue@latest
# 按需选择配置（推荐 TypeScript + Pinia）

二、基础地图集成

1. NPM 安装 Loader

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

2、创建地图容器

<template>
  <div id="container"></div>
</template>

3、设置地图容器样式

<style  scoped>
    #container {
      width: 100%;
      height: 600px;
    }    
</style>

4、引入 JS API  Loader 

import AMapLoader from '@amap/amap-jsapi-loader';

5、完整示例

需要替换为自己的key和安全密钥

<script setup lang="ts">
import { onMounted,onUnmounted} from 'vue'
import AMapLoader from "@amap/amap-jsapi-loader";

let map:any = null;
let iplng=null;
let iplat=null;
    
  // 组件挂载后初始化
onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "「你申请的安全密钥」",
  };
  initMap();

});
  // 获取用户当前定位
  const initMap=async ()=>{
    const AMap=await AMapLoader.load({
            key: "「你申请的开发者Key」",   // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ['AMap.Scale','AMap.Geolocation','AMap.ToolBar','AMap.ControlBar','AMap.HawkEye'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
        //创建地图对象
        map = new AMap.Map('container', {
          // 设置地图容器id
          pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
          viewMode: "3D",    //是否为3D地图模式
          rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
          pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
          rotation: -15, //初始地图顺时针旋转的角度
          zooms: [2, 20], //地图显示的缩放级别范围
          zoom: 13,           //初始化地图级别
          terrain: true, //开启地形图
          // center: [105.602725, 37.076636], //初始化地图中心点位置
          resizeEnable: true
        });

        AMap.plugin(['AMap.Geolocation'], function () {
            let geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：5s
                buttonPosition: 'RB',    //定位按钮的停靠位置
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
                position: {
                right: '15px',
                top: '250px'
                }
            })

            //添加控件
            map.addControl(geolocation)
            map.addControl(new AMap.ToolBar({
              position: {
                right: '15px',
                top: '150px'
            }
            }));
            map.addControl(new AMap.ControlBar({
            position: {
                left: '15px',
                top: '20px'
            }}))
            map.addControl(new AMap.Scale())
            map.addControl(new  AMap.HawkEye())
            
            geolocation.getCurrentPosition(function (status:any, result:any) {
                console.log(status)
                if (status == 'complete') {
                    console.log(status)
                    onComplete(result)
                } else {
                    onError(result)
                }
            });
            function onComplete(data:any) {
                // data是具体的定位信息
                console.log('成功', data)
                var str = []
                
                iplng=data.position.lng
                iplat=data.position.lat

                //在运行阶段添加点标记
                const marker = new AMap.Marker({
                  position: new AMap.LngLat(iplng, iplat),
                  title: "我的位置",
                });
                //将创建的点标记添加到已有的地图实例：
                map.add(marker);

                str.push('定位结果：' + data.position)
                str.push('定位类别：' + data.location_type)
                if (data.accuracy) {
                    str.push('精度：' + data.accuracy + ' 米')
                }
                //如为IP精确定位结果则没有精度信息
                str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'))
                console.log('str', str)
            }
            
            function onError(data:any) {
                // 定位出错
                console.log('失败', data)
            }
        })

        AMap.plugin('AMap.CitySearch', function () {
          var citySearch = new AMap.CitySearch()
          citySearch.getLocalCity(function (status:any, result:any) {
            if (status === 'complete' && result.info === 'OK') {
              // 查询成功，result即为当前所在城市信息
              console.log('当前城市信息：', result.city)
            }
          })
        })
    }
    onUnmounted(() => {
      map?.destroy();
    });
</script>
<template>
  <div id="container"></div>
</template>

<style scoped lang="less">
#container {
  width: 100%;
  height: 800px;
}
</style>

效果图如下