Vue 使用高德地图，添加点标记 + 点击地图获取坐标 + 带搜索（即地理编码 + 逆地理编码） - 附完整示例

高德地图：

与真实世界联通 - 高德开放平台为开发者赋能，将地图精致地呈现在您的应用中

无论基于哪种平台，都可以通过高德开放平台API和SDK，轻松地完成地图的构建工作

 官方文档：地图 | 高德地图API

地图 | 高德地图API地图，地图sdk，地图JS API，地图定制，自定义地图，地图覆盖物，地图绘制，路线规划，坐标转换，距离/面积计算，距离测量，室内地图，地图显示，地图个性化，地图开发，室内定位https://lbs.amap.com/product/map#/

效果

一、准备工作

1、注册/登录账号

2、点击控制台

3、创建应用

4、获取key和密钥，如上图所示

注：使用web服务API，如下图所示

二、安装依赖包

1、安装命令

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

 2、这是我的版本 

"@amap/amap-jsapi-loader": "^1.0.1",

三、使用步骤

1、在index.html文件中引入密钥

代码如下（示例）：

2、在vue文件中引入依赖包

代码如下（示例）：

import AMapLoader from "@amap/amap-jsapi-loader"

3、申明变量并初始化调用

代码如下（示例）：

import { shallowRef, defineEmits, ref, onBeforeUnmount } from 'vue';

const map = shallowRef(null);
let AMapObj, placeSearch, marker, geocoder;

function initMap(){
  AMapLoader.load({
    key:'',  //设置您的key
    version:"2.0",
    plugins:['AMap.ToolBar','AMap.Driving'],
    AMapUI:{
      version:"1.1",
      plugins:[],

    },
    Loca:{
      version:"2.0.0"
    },
  }).then((AMap)=>{
    // console.log(AMap);
    AMapObj = AMap;
    map.value = new AMap.Map("map-box",{
      viewMode:"3D",
      zoom:10,
      zooms:[2,22],
      center: [105.602725,37.076636],
    });
    map.value.on('click', onMapClick);
    AMap.plugin(
      ['AMap.ToolBar','AMap.Scale','AMap.Geolocation','AMap.PlaceSearch',
        'AMap.Geocoder','AMap.AutoComplete'],
      () => {
        // 缩放条
        const toolbar = new AMap.ToolBar();
        // 比例尺
        const scale = new AMap.Scale();
        // 定位
        const geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 10000, //超过10秒后停止定位，默认：5s
          position: 'RT', //定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
        });
        geocoder = new AMap.Geocoder({
          city: '全国',
        });
        map.value.addControl(geolocation);
        map.value.addControl(toolbar);
        map.value.addControl(scale);
        placeSearch = new AMap.PlaceSearch({
          // map: map.value,
          city: '全国',
          pageSize: 10, // 单页显示结果条数
          pageIndex: 1, // 页码
          citylimit: false, // 是否强制限制在设置的城市内搜索
          autoFitView: true,
        });
      });
  }).catch(e=>{
    console.log(e);
  })
}

initMap();

四、完整示例

Index.html

Map.vue

注：clipboard一键复制的详细使用方法参考地址

https://mp.csdn.net/mp_blog/creation/editor/131308740