在 Vue3 中使用高德 (基础用法)

在高德中, TS 几乎是假的 (至少在 2023年11月29日 是这样). 里面几乎使用的 any 类型, 没有文档情况下比较难用.

使用步骤:

1. 开通高德账户, 创建应用, 创建 key.
2. 安装 ES 模块: @amap/amap-jsapi-loader. 所有组件均由该模块返回.
3. 导入模块, 调用 load 方法. 该方法异步返回 AMap 命名空间, 地图组件在该命名空间下.
4. 利用 AMap.Map 实例化地图组件, 设置属性后加载到页面中 (页面中放置一个 div 作为容器).

高德文档采用 纯 js 的方式来演示使用, 若使用 ES 模块, 在进阶教程中有介绍

申请 Key 的页面样例

安装模块依赖:

npm i @amap/amap-jsapi-loader --save # 安装 load 模块
npm i @amap/amap-jsapi-types --D # 官方提供的类型, 不是很完整

参考代码:

<template>
  <div id="gaodemap" class="gaodemap" ref="gaodemap"></div>
</template>

<style lang="scss" scoped>
.gaodemap {
  width: 1000px;
  height: 600px;
  border: 1px solid red;
  margin: 10px auto;
}
</style>

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

let map: AMap.Map | undefined;

onMounted(async () => {
  const AMap = await AMapLoader.load({
    key: 'key',
    version: '2.0',
    plugins: []
  })

  map = new AMap.Map("gaodemap", {
    // 设置地图容器id
    viewMode: "3D", // 是否为3D地图模式
    zoom: 11, // 初始化地图级别
    center: [116.397428, 39.90923], // 初始化地图中心点位置
  }) as AMap.Map
})

onUnmounted(() => {
  map?.destroy()
})
</script>