vue引入高德地图

首先、安装：@amap/amap-jsapi-loader

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

注意：在vue中安装此依赖

然后、申请高德地图账号后、获得相关高德地图的key值和高德地图的安全秘钥

注意AMapKey是申请高德地图账号后，配置引用的key

其次在main.js引入并配置相关信息

main.js相关步骤：

步骤1引入  @amap/amap-jsapi-loader

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

步骤2配置 window._AMapSecurityConfig

window._AMapSecurityConfig = {
  securityJsCode: 'secretKeysecretKeysecretKey', // 高德地图的安全秘钥secretKey
}

步骤3配置 

AMapLoader.load({
  "key":"keykeykeykeykeykeykeykey", // 高德地图的key 
  "version": "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  // 使用城市定位
  "plugins": ['AMap.Geocoder','AMap.CitySearch', 'AMap.Weather', 'Amap.scale'], // 需要使用的的插件列表，如比例尺'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)

完整代码：

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


window._AMapSecurityConfig = {
  securityJsCode: 'secretKeysecretKeysecretKey', // 高德地图的安全秘钥secretKey
}

AMapLoader.load({
  "key":"keykeykeykeykeykeykeykey", // 高德地图的key 
  "version": "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  // 使用城市定位
  "plugins": ['AMap.Geocoder','AMap.CitySearch', 'AMap.Weather', 'Amap.scale'], // 需要使用的的插件列表，如比例尺'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)

最后：创建地图就可以了！