vue项目中使用高德地图的异步加载

• 前言：为什么使用异步加载这里不在赘述，大家可以自行去百度或者去高德官网上查看官方的解释
• 官网地址
• amap-jsapi-loader 是高德开放平台官网提供的地图 JSAPI 的加载器，可帮助开发者快速定位、有效避免加载引用地图 JSAPI 各种错误用法。
• 下载

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

• 再需要使用的文件引入

import AMapLoader from "@amap/amap-jsapi-loader";

  mounted () {
    this.getGis()
  },
  methods: {
    getGis () {
      AMapLoader.load({
        key: '你自己申请的key', // 申请好的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
        }
      }).then((AMap) => {
        var map = new AMap.Map('container', {
          mapStyle: 'amap://styles/1f496f1623b2d0575e0a36b7deafc8cb',
          features: ['bg', 'road'],
          pitch: 40
        })
        var layer = new Loca.LinkLayer({
          map: map,
          fitView: true
        })

        layer.setData(city_line, {
          lnglat: 'line'
        })

        layer.setOptions({
          style: {
            borderWidth: 1.5,
            opacity: 0.8,
            color: '#D1E87D'
          }
        })

        layer.render()
      })
    }
  }