高德地图两种引入方式

第一种 npm方式引入

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.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)

第二种 脚本引入

    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.CircleEditor"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>

第三种 异步加载

1、先声明函数
  window.onLoad  = function(){
        var map = new AMap.Map('container');
  }
2、将函数放在url后面
  var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=onLoad';

3、创建script标签
  var jsapi = doc.createElement('script');
  
4、给 script标签添加一些属性
  jsapi.charset = 'utf-8';
  jsapi.src = url;
  
5、将script标签添加到head标签中
  document.head.appendChild(jsapi);