百度地图异步加载实现

百度地图异步加载实现

前言：使用百度地图会出现一个问题，那就是调用百度API的时候，百度的JS相关文件并没有加载完成，这个时候使用百度API就会报undefined错误。为了解决这个问题可以通过异步加载实现。

创建map.js 文件

export function loadBMap (ak) {
  return new Promise(function (resolve, reject) {
    if (typeof window.BMapGL !== 'undefined') {
      resolve(window.BMapGL)
      return true
    }

    // 百度地图异步加载回调处理，不使用加载的script不会执行
    window.onBMapCallback = function () {
      console.log('百度地图脚本初始化成功...')
      resolve(window.BMapGL)
    }

    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `http://api.map.baidu.com/api?type=webgl&v=1.0&ak=${ak}&s=1&callback=onBMapCallback`
    // 启用 https 配置，通过 s=1 参数实现
    // 启用 callback 参数，异步加载必须使用此参数才可以生效
    script.onerror = reject
    document.documentElement.appendChild(script)
  })
}

在vue中调用map.js

<script>
import { loadBMap } from './map'
export default {
  data () {
    return {
      ak: 'xxxxx',
      bMap: null,
      BMapGL: null
    }
  },
  components: { },
  watch: {},
  computed: {},
  methods: {},
  mounted () {
    this.getTableSourceData()
    this.$nextTick(function () {
      const that = this
      loadBMap(that.ak).then(BMapGL => {
        that.BMapGL = BMapGL
        that.bMap = new that.BMapGL.Map(this.$refs.mapContainer)
        const myGeo = new that.BMapGL.Geocoder()
        // var point = new that.BMapGL.Point(116.404, 39.915)
        // 创建点坐标
        myGeo.getPoint('广东省阳江市阳东区东城镇裕东八路18号', function (point) {
          that.bMap.centerAndZoom(point, 19)
          // 初始化地图,设置中心点坐标和地图级别
        })
        // 创建地图实例
        that.bMap.enableScrollWheelZoom(true)
        // 开启鼠标滚轮缩放
        that.bMap.addControl(new that.BMapGL.ScaleControl())
        // 添加比例尺控件
        that.bMap.addControl(new that.BMapGL.ZoomControl())
        // 添加缩放控件
        that.bMap.addControl(new that.BMapGL.CityListControl())
        // 添加城市列表控件
      })
    })
  }s
}
</script>