Vue3使用高德地图

1、首先要在高德开发平台申请开发者账号申请key（文档）

// npm引入
npm i @amap/amap-jsapi-loader --save
cnpm i @amap/amap-jsapi-loader --save

2、封装map.ts

// 创建map.js
/*
 * @Author: lzx
 * @Date: 2022-06-09 11:33:28
 * @LastEditors: lzx
 * @LastEditTime: 2022-06-09 13:01:47
 * @Description: Fuck Bug
 * @FilePath: \lzds\src\utils\map.ts
 */
import AMapLoader from '@amap/amap-jsapi-loader' // 使用加载器加载JSAPI，可以避免异步加载、重复加载等常见错误加载错误
/**
 * 高德地图
 * @param {*} map 
 */
const initMap = (map: any) => {
  AMapLoader.load({
    key: "XXXXXXXXXXXXXXXXXXX", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
      "AMap.Scale", //工具条，控制地图的缩放、平移等
      "AMap.ToolBar", //比例尺，显示当前地图中心的比例尺
      "AMap.Geolocation", //定位，提供了获取用户当前准确位置、所在城市的方法
      "AMap.HawkEye", //鹰眼，显示缩略图
    ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      let map = new AMap.Map("map", {//设置地图容器id
        zoom: 10, //初始化地图层级
        viewMode: "3D", //是否为3D地图模式
        center: [116.397128, 39.916527], //初始化地图中心点位置
        dragEnable: true, //禁止鼠标拖拽
        scrollWheel: true, //鼠标滚轮放大缩小
        doubleClickZoom: true, //双击放大缩小
        keyboardEnable: true, //键盘控制放大缩小移动旋转
      });
      map.setDefaultCursor("pointer"); //使用CSS默认样式定义地图上的鼠标样式（default/pointer/move/crosshair）
      map.addControl(new AMap.Scale()); //异步同时加载多个插件
      map.addControl(new AMap.ToolBar());
      map.addControl(new AMap.Geolocation());
      let HawkEye = new AMap.HawkEye({
        position: "LT", //控件停靠位置（LT/RT/LB/RB）
      });
      map.addControl(HawkEye);
      map.add(
        new AMap.Marker({
          position: map.getCenter(),
        })
      );
      // map.add(marker); // 地图添加标记
      AMapLoader.load({
        // 可多次调用load
        plugins: ["AMap.MapType"],
        key: '',
        version: ''
      })
        .then((AMap) => {
          map.addControl(new AMap.MapType());
        })
        .catch((e) => {
          console.error(e);
        });
      // 显示地图层级与中心点信息
      function logMapinfo() {
        let zoom = map.getZoom(); //获取当前地图级别
        let center = map.getCenter(); //获取当前地图中心位置
      }
      //绑定地图移动与缩放事件
      map.on("moveend", logMapinfo);
      map.on("zoomend", logMapinfo);
      //为地图注册click事件获取鼠标点击出的经纬度坐标
      map.on("click", function (e: any) {
        // 点击事件
      });
      let infoWindow = new AMap.InfoWindow({
        //创建信息窗体
        isCustom: false, //使用自定义窗体
        anchor: "top-right", //信息窗体的三角所在位置
        content: `<a href="#">XXX信息</a>`, //信息窗体的内容可以是任意html片段
        offset: new AMap.Pixel(-10, -5),
      });
      infoWindow.open(map, [116.397128, 39.916527]); //填写想要窗体信息指示的坐标
    })
    .catch((e) => {
      console.log(e);
    });
}

export {
  initMap
};

3、引入封装的map.ts并且使用

// 使用ref获取dom
<div id="map" ref="map"></div>
import { initMap } from '@/utils/map'
const map = ref(null)
initMap(map)