官方文档

安装 Loader

1
npm i @amap/amap-jsapi-loader

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 <!-- MyMap.vue -->
<template>
  <div :id="state.id"></div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
const props = defineProps({
  modelValue: null, // 坐标
});
const state = reactive({
  id: "",
  map: null as any,
});
const initMap = () => {
  state.id =
    Math.random().toString(36).substring(7) + Math.floor(Math.random() * 100);
  AMapLoader.load({
    key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本
    plugins: ["AMap.Scale", "AMap.Marker"], // 需要使用的的插件列表
  })
    .then((AMap) => {
      state.map = new AMap.Map(state.id, {
        //设置地图容器id
        viewMode: "3D", //是否为3D地图模式
        zoom: 18, //初始化地图级别
        center: props.modelValue, //初始化地图中心点位置
        doubleClickZoom: false, // 禁止双击放大地图
        layers: [],
      });
      if (state.map) {
        //   比例尺
        const scale = new AMap.Scale({
          visible: true,
        });
        state.map.addControl(scale);
        // 点
        const marker = new AMap.Marker({
          position: props.modelValue,
        });
        state.map.add(marker);
      }
    })
    .catch((e) => {
      console.log(e);
    });
};
onMounted(() => {
  initMap();
});
</script>
<style lang="less" scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
</style>