vue uses Gaode map

1. Install the plug-in

npm i amap/amap-jsapi-loader

Currently using 1.0.1
2. Create a shared js file map.js

/* 引入下载的插件 */
import AMapLoader from "@amap/amap-jsapi-loader";
//抛出initMap初始化方法
export const initMap = () =>
  AMapLoader.load({
    
    
    key: "", // 申请好的Web端开发者Key，
    /* 首次调用 load 时必填 */
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
      "AMap.PolygonEditor",
      "AMap.MoveAnimation",
      "AMap.PlaceSearch",
      "AMap.AutoComplete",
      "AMap.Geocoder"
    ], // 所用的组件
  });

3. Call on the required page

  import {
    
    
    initMap
  } from '../utils/map'
  initMap().then(async (Amap) => {
    
    
     this.AMap = Amap;
     this.map = new Amap.Map("containerAdd", {
    
    
       //地图容器id与盒子id一致
       viewMode: "3D", //是否为3D地图模式
       zoom: 15, //初始缩放比例
       zooms: [3, 16],
       resizeEnable: true,
       center: [98.901523, 39.984146], //中心点位置
      })
 })

4. Introduce css styles into index.html

<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>