vue使用高德地图

1、安装插件

npm i amap/amap-jsapi-loader

目前用的是1.0.1
2、创建共用的js文件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、在所需的页面调用

  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、在index.html中引入css样式

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