vue异步引入百度地图API

最新推荐文章于 2024-06-19 12:18:51 发布

原创最新推荐文章于 2024-06-19 12:18:51 发布 · 906 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图 #vue #异步引入

vue 专栏收录该内容

23 篇文章

订阅专栏

官网采用原生写法引入百度地图，不适用于Vue。异步引入百度地图可方便管理baiduAK。代码采用定时器循环resolve(BMap)，解决因异步无法正常返回BMap的问题，并介绍了引入和使用方式。

看了下官网上的方法，是采用原生的写法，不适用于vue

异步引入的好处是baiduAK可以方便管理

import { baiduAk } from '@/settings'

export function map() {
  /* eslint-disable */
  return new Promise(function(resolve, reject) {
    if (typeof (BMap) !== 'undefined') return resolve(BMap)
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `http://api.map.baidu.com/api?v=2.0&ak=${baiduAk}&callback=init`
    script.onerror = reject
    document.head.appendChild(script)
    const timer = setInterval(() => {
      if (BMap) {
        resolve(BMap)
        clearInterval(timer)
      }
    }, 500)
  })
}

此代码特殊在于使用了定时器循环resolve(BMap)，因异步原因，有时无法正常返回BMap，故采用此写法

引入方式

import { map } from '@/utils/map'

使用方式

            this.$nextTick(() => {
              map().then(BMap => {
                this.map = new BMap.Map('allmap', { enableMapClick: false })
                const point = new BMap.Point(longitude, latitude)
                this.map.centerAndZoom(point, 17)
                this.map.enableScrollWheelZoom() // 启用滚轮放大缩小，默认禁用
                this.map.enableContinuousZoom() // 启用地图惯性拖拽，默认禁用
              })
            })