Gaode map is used in combination with vue3 and vue2 [Nanny-level demo tutorial]

---

Function introduction

Vue is a JavaScript framework for building user interfaces. It is built on standard HTML, CSS, and JavaScript, and provides a declarative, component-based programming model to help you develop user interfaces efficiently.

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

Application scenarios

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

Demo example

Instructions for use

Prepare

Become a developer and create a key
In order to call the API normally, please first register as a developer of the Amap open platform and apply for the key and security key of the web platform (JS API) , clickspecific operations.

hint

The key you apply for after December 2, 2021 needs to be used together with your security key.

Develop a map component

1. Install using Loader via NPM

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

1. Create a new Map.vue file
   Create a new Map.vue file in the project and use it as a map component.
2. Create a map container
   Create a div tag as the map container in the Map.vue map component, and set the id attribute of the map container to container.

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

4. Set map container style

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

5. Introducing JS API Loader

Introduce amap-jsapi-loader into the map component Map.vue

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

6. Create a map component
   Initialize the map in the Map.vue file

Component form in 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>

Component form in 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 is the API loader we provide. Its loading method is to load JS API content asynchronously, so it needs to be verified before using the AMap object. In this usage scenario, the JS API will not block the execution and parsing of other content on the page. However, script parsing may occur after other script resources are executed, because special processing is required to ensure that the relevant interfaces of the JS API are called after the AMap object is completely generated, otherwise an error may be reported.