高德地图结合vue3和vue2使用 【保姆级demo教程】

---

功能简介

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

   本章教程将介绍如何在 Vue 中使用自定义组件结合 JS API 加载、创建和销毁地图。

应用场景

如果您的项目是使用 Vue 框架，建议您将地图的初始化封装成组件，这样更便于使用 Vue 组件的生命周期来加载、创建和销毁地图。

Demo示例

使用说明

准备

成为开发者并创建 key
为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击 具体操作。

提示

您在2021年12月02日以后申请的key需要配合您的安全密钥一起使用。

开发一个地图组件

1. 按 NPM 方式安装使用 Loader

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

1. 新建 Map.vue 文件
   在项目中新建 Map.vue 文件，用作地图组件。
2. 创建地图容器
   在 Map.vue 地图组件中创建 div 标签作为地图容器 ，并设置地图容器的 id 属性为 container。

<template>
  <div id="container"></div>
</template>

4. 设置地图容器样式

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

5. 引入 JS API Loader

在地图组件 Map.vue 中引入 amap-jsapi-loader

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

6. 创建地图组件
   在 Map.vue文件中初始化地图

vue 2 中的组件形式

<template>
  <div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "map-view",
  mounted() {
    this.initAMap();
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始化地图中心点位置
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
<style scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>

vue 3 中的组件形式

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

let map = null;

onMounted(() => {
  AMapLoader.load({
    key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
      });
    })
    .catch((e) => {
      console.log(e);
    });
});

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

<template>
  <div id="container"></div>
</template>

<style scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>

JS API Loader是我们提供的 API 加载器，其加载方式为异步加载 JS API 内容，所以在使用 AMap 对象前需进行验证，这种使用场景下，JS API 不会阻塞页面其他内容的执行和解析，但是脚本解析将有可能发生其他脚本资源执行之后，因为需要特别处理，以保证在 AMap对象完整生成之后再调用 JS API 的相关接口，否则有可能报错。