vue中使用高德地图

第一步 注册账号并申请key

首先注册账号并申请Key

第二步 准备容器

添加div标签作为地图容器，同时为该div指定id属性；

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

#container {width:300px; height: 180px; }  

第三步 引入地图JSAPI脚本

第四步 npm方式使用loader

JSAPI Loader是我们提供的 API 加载器，可帮助开发者快速定位、有效避免加载引用地图 JSAPI 各种错误用法

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

第五步 main.js注册全局组件

import AMapLoader from '@amap/amap-jsapi-loader';
AMapLoader.load({
  "key": "78451e5319b52850b9b75aafe8961dc3", // 申请好的Web端开发者Key，首次调用 load 时必填
  "version": "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  "plugins": [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  "AMapUI": { // 是否加载 AMapUI，缺省不加载
    "version": '1.1', // AMapUI 缺省 1.1
    "plugins": [], // 需要加载的 AMapUI ui插件
  },
  "Loca": { // 是否加载 Loca， 缺省不加载
    "version": '1.3.2' // Loca 版本，缺省 1.3.2
  },
}).catch(e => {
  console.log(e);
})
Vue.use(AMapLoader)

第六步 需要在mounted中调用方法