vben-admin框架中插入高德地图

最近在修改前端框架，本人属于前端小菜鸡，堪堪入个门的那种。所以且改且总结吧。

主要原因还是vben-admin框架demo中的地图源码不好用，key不能拿来直接用了。所以重新申请了一下key。

以下是vben-admin中的地图源码：

<template>
  <div ref="wrapRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';

  import { useScript } from '/@/hooks/web/useScript';

  const A_MAP_URL = 'https://webapi.amap.com/maps?v=2.0&key=d7bb98e7185300250dd5f918c12f484b';

  export default defineComponent({
    name: 'AMap',
    props: {
      width: {
        type: String,
        default: '100%',
      },
      height: {
        type: String,
        default: 'calc(100vh - 78px)',
      },
    },
    setup() {
      const wrapRef = ref<HTMLDivElement | null>(null);
      const { toPromise } = useScript({ src: A_MAP_URL });

      async function initMap() {
        await toPromise();
        await nextTick();
        const wrapEl = unref(wrapRef);
        if (!wrapEl) return;
        const AMap = (window as any).AMap;
        new AMap.Map(wrapEl, {
          zoom: 11,
          center: [116.397428, 39.90923],
          viewMode: '3D',
        });
      }

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

      return { wrapRef };
    },
  });
</script>

调试的时候可以根据以下错误码大概定位出是什么问题。

高德地图错误码：

错误信息列表-参考手册-地图 JS API | 高德地图API

申请高德地图key：

首先要去高德地图官网注册并使用支付宝实名认证。

申请key，主要参考了以下两篇博文

https://www.jianshu.com/p/4183d541dcb5

高德地图---USERKEY_PLAT_NOMATCH_梦想实现家jamie的博客-CSDN博客

需要注意的是把要申请的服务类型是：Web端(JS API)。

高德地图中的一些配置：

高德地图配置：

主要参考以下博文：

前端嵌入高德地图_githubcurry的博客-CSDN博客_网页嵌入高德地图

点标记-覆盖物-教程-地图 JS API | 高德地图API

本人代码：

标记了北京，上海，南京，深圳：

<template>
  <Card title="地图">
    <div ref="wrapRef" :style="{ height, width }"></div>

  </Card>
</template>

<script lang="ts" setup>
  import { watch, ref, nextTick, unref, onMounted } from 'vue';
  import { Card } from 'ant-design-vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { useScript } from '/@/hooks/web/useScript';


  const A_MAP_URL = 'https://webapi.amap.com/maps?v=2.0&key=6c23ddcc44613ecc74179c8b76d60037';

  const wrapRef = ref<HTMLDivElement | null>(null);
  const { toPromise } = useScript({ src: A_MAP_URL });

  async function initMap() {
    await toPromise();
    await nextTick();
    const wrapEl = unref(wrapRef);
    if (!wrapEl) return;
    const AMap = (window as any).AMap;
    var map = new AMap.Map(wrapEl, {
      zoom: 4.1,
      center: [118.78, 32.04],
      viewMode: '3D',
    });
    AMap.plugin('AMap.ToolBar', function () {
      var toolbar = new AMap.ToolBar();
      map.addControl(toolbar)
    });

    // 参考手册：https://lbs.amap.com/api/javascript-api/guide/overlays/marker
    //标记南京
    var marker = new AMap.Marker({
      icon: 'https://vdata.amap.com/icons/b18/1/2.png', //创建好的icon，也可以在后面使用setIcon()方法添加
      position: map.getCenter(), //标记的位置坐标
      offset: new AMap.Pixel(-5, -5), //标记相对位置的偏移，对应style的left和top
      title: "南京",
      zoom: 13,
      label: {
        offset: new AMap.Pixel(-5, -10),
        content: "南京",
      },
    });

    map.add(marker); //将创建好的marker放到地图上面

    // 标记北京
    marker = new AMap.Marker({
      icon: 'https://vdata.amap.com/icons/b18/1/2.png', //创建好的icon，也可以在后面使用setIcon()方法添加
      position: [116.46, 39.92], //标记的位置坐标
      offset: new AMap.Pixel(-5, -5), //标记相对位置的偏移，对应style的left和top
      title: "北京",
      zoom: 13,
      label: {
        offset: new AMap.Pixel(-5, -10),
        content: "北京",
      },
    });
    map.add(marker); //将创建好的marker放到地图上面

    //标记上海
    marker = new AMap.Marker({
      icon: 'https://vdata.amap.com/icons/b18/1/2.png', //创建好的icon，也可以在后面使用setIcon()方法添加
      position: [121.48, 31.22], //标记的位置坐标
      offset: new AMap.Pixel(-5, -5), //标记相对位置的偏移，对应style的left和top
      title: "上海",
      zoom: 13,
      label: {
        offset: new AMap.Pixel(0, 10),
        content: "上海",
      },
    });
    map.add(marker); //将创建好的marker放到地图上面

    // 标记深圳
    marker = new AMap.Marker({
      icon: 'https://vdata.amap.com/icons/b18/1/2.png', //创建好的icon，也可以在后面使用setIcon()方法添加
      position: [114.07, 22.62], //标记的位置坐标
      offset: new AMap.Pixel(-5, -10), //标记相对位置的偏移，对应style的left和top
      title: '深圳',
      zoom: 13,
      label: {
        offset: new AMap.Pixel(-5, -10),
        content: '深圳',
      },
    });
    map.add(marker); //将创建好的marker放到地图上面
  }

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

</script>