vue加载任何第三方插件 （如高德jdk）

1. 创建一个AMap.js,路径'src/assets/js/AMap.js' 内容如下：

// src/assets/js/AMap.js

export default function MapLoader () {   
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap)
    } else {
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.async = true
      script.src = 'http://webapi.amap.com/maps?v=1.3&callback=initAMap&key=jgvghgvjg5165465161iuhuybub'
      script.onerror = reject
      document.head.appendChild(script)
    }
    window.initAMap = () => {
      resolve(window.AMap)
    }
  })
}

2. 在任何.vue文件中使用

// test.vue
<template>
  <div class="test">
    <div id="container" class="h300 w300"></div>
  </div>
</template>
<script>
import MapLoader from '@/assets/js/AMap.js'
export default {
  name: 'test',
  data () {
    return {
      map: null
    }
  },
  mounted () {
    let that = this
    MapLoader().then(AMap => {
      console.log('地图加载成功')
      that.map = new AMap.Map('container', {
        center: [117.000923, 36.675807],
        zoom: 11
      })
    }, e => {
      console.log('地图加载失败' ,e)
    })
  }
}
</script>

这样得到了一个异步加载的高德地图插件，不需要在全局引入，也不用担心功能不齐全，其他的东西，完全参照高德地图官方文档来设置即可。

这种方法其实可以用来加载任何第三方插件,本文只是以高德地图为例来说明，而且相对来说更加可控，不受制于封装，一些旧版本的经典js插件在es6项目中使用的过渡更加平滑。

mounted() {

    this.initMap()

  },
  methods: {
    init() {
      nativeApi.getPermission()
    },
    async initMap() {
      try {
        this.resMap = await MapLoader()
        this.map = new this.resMap.Map('container', {
          resizeEnable: true,
          zoom: 10
        })

        this.resMap.event.addListener(this.map, 'click', (e) => {

          const lnglat = e.lnglat
          new this.resMap.Geocoder().getAddress(lnglat, (status, result) => {
            if (status === 'complete' && result.regeocode) {
              const address = result.regeocode.formattedAddress


              this.initAddressListFn(this.newAddress)
            } else {
              console.log.error('根据经纬度查询地址失败')
            }
          })

          this.geoHandle()
        })

        this.initAddressListFn(this.newAddress, 'customer')
        // 定位
        this.geoHandle()
      } catch (error) {
        console.log(error)
      }
    },

    initAddressListFn(address, type) {
      this.resMap.plugin('AMap.Autocomplete', () => {
        var autoOptions = {
          city: ''
        }
        var autoComplete = new this.resMap.Autocomplete(autoOptions)
        autoComplete.search(address, (status, result) => {
          // console.log(status)
          console.log(JSON.stringify(result))
          if (status == 'complete') {
            this.searchAddressList = result.tips
          } else {
            console.log('加载中。。。')
          }
        })
      })
    },
    addMark(obj) {
      this.map.clearMap()
      var icon = new this.resMap.Icon({
        image: companyMarkerIcon, 
        imageOffset: new this.resMap.Pixel(0, 0), 
        imageSize: new this.resMap.Size(32, 32)
      })
      var marker = new this.resMap.Marker({
        position: new this.resMap.LngLat(obj['lng'], obj['lat']),
        offset: new this.resMap.Pixel(-16, -32),
        icon: icon, 
        zoom: 10
      })

      this.map.add(marker)
      this.map.setFitView()
    },
    geoHandle() {
      this.map.plugin('AMap.Geolocation', () => {
        var geolocation = new this.resMap.Geolocation({
          enableHighAccuracy: true, 
          timeout: 10000, 
          buttonOffset: new this.resMap.Pixel(10, 20),
          showButton: true,
          buttonPosition: 'RT', 
          useNative: true, 
          markerOptions: { 
            offset: new this.resMap.Pixel(-16, -32),
            zoom: 10,
            content: '<img src="' + icon + '" style="width:32px;height:32px"/>'
          },
          maximumAge: 0,
          convert: true,
          showCircle: false,
          panToLocation: true,
          zoomToAccuracy: true 
        })

        this.map.addControl(geolocation)
        geolocation.getCurrentPosition((status, result) => {
          if (status == 'complete') {
            onComplete(result)
          } else {
            onError(result)
          }
        })
      })
      function onComplete(data) {
        console.log('定位成功' + JSON.stringify(data))
      }
      const vm = this
      function onError(data) {
        console.log(`定位失败${data.message}`)
      }
    },

原文