话不多说直接上干活

在此之前你需要有高德地图的 key，这个自己去申请即可

1，首先需要在终端安装

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

2，准备一个容器

<template>
    <div id="container"></div> 
</template>
<style scoped>
  #container{ 
    padding:0px;
    margin: 0px;
    width: 100%;
    height: 800px; 
  } 
</style>

3，在需要使用的页面引入刚才安装的

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

4，

  function initMap(){
    table.maps = true;
    AMapLoader.load({
    key: "你自己的 key 值", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "1.4.4", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  }).then((AMap)=>{
    const map = new AMap.Map("container", {
        //设置地图容器id
        viewMode: "3D", //是否为3D地图模式
        zoom: 15, //初始化地图级别
        center: [113.98331263696, 35.288301920621],
      });
      AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye"], function () {
        //异步同时加载多个插件
        map.addControl(new AMap.HawkEye()); //显示缩略图
        map.addControl(new AMap.Scale()); //显示当前地图中心的比例尺
      });
    //点击获取经纬度事件
      map.on("click", (e) => {
        console.log(e); 
        //根据自己的变量名赋值即可
      });
      
    })
  }

这个时候就已经可以了

 

感觉有用的话就点个关注吧