vue3动态引入BMap

我的项目目前只有几个页面用到地图Api，不想首屏加载地图，因为用的ts，没有方案可以完全跑下来，所以手动补全。

1 在global.d.ts中，在window上添加Bmap

1.  
   // global.d.ts
2.  
   declare global {
3.  
   interface Window {
4.  
   BMap: T
5.  
   }
6.  
   }

2. 在utiles文件夹下新建loadMap.js，注意，如果你的网站是HTTPS类型，加载的资源也需要是HTTPS类型

1.  
   // loadMap.ts
2.  
   /**
3.  
   * @description 加载百度地图相关资源js
4.  
   */
5.  
   export default function loadBMap(): Promise<void> {
6.  
   return new Promise<void>((resolve, reject) => {
7.  
   //聚合API依赖基础库,因此先加载基础库再加载聚合API
8.  
   ///MarkerClusterer_min.js依赖TextIconOverlay.js。因此先加载TextIconOverlay.js
9.  
   const textIconOverlayUrl = 'https://api.map.百度.com/library/TextIconOverlay/1.2/src/TextIconOverlay.js'
10.  
    const markerClusterer_min = 'https://api.map.百度.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js'
11.  
    try {
12.  
    resolve(
13.  
    loadBaiduMapJs().then(() => {
14.  
    resolve(
15.  
    loadJs(textIconOverlayUrl).then(() => {
16.  
    resolve(loadJs(markerClusterer_min))
17.  
    })
18.  
    )
19.  
    })
20.  
    )
21.  
    } catch (err) {
22.  
    reject(err)
23.  
    }
24.  
    })
25.  
    }
26.  
    /**
27.  
    * @description 加载百度地图基础组件js
28.  
    */
29.  
    export function loadBaiduMapJs(): Promise<void> {
30.  
    const AK = '你的AK'
31.  
    const BMap_URL = 'https://api.map.百度.com/api?v=2.0&ak=' AK '&callback=onBMapCallback'
32.  
    return new Promise((resolve, reject) => {
33.  
    try {
34.  
    // 如果已加载直接返回
35.  
    const BMap = window.BMap
36.  
    if (typeof BMap !== 'undefined') {
37.  
    resolve(BMap)
38.  
    return true
39.  
    }
40.  
    window.onBMapCallback = function () {
41.  
    resolve(BMap)
42.  
    }
43.  
    const scriptNode = document.createElement('script')
44.  
    scriptNode.setAttribute('type', 'text/javascript')
45.  
    scriptNode.setAttribute('src', BMap_URL)
46.  
    document.head.appendChild(scriptNode)
47.  
    } catch (err) {
48.  
    const scriptNode = document.createElement('script')
49.  
    scriptNode.setAttribute('type', 'text/javascript')
50.  
    scriptNode.onerror = reject
51.  
    }
52.  
    })
53.  
    }
54.  
    /**
55.  
    * @description 加载第三方组件js公共方法
56.  
    * @param {string} url
57.  
    */
58.  
    export function loadJs(url: string): Promise<void> {
59.  
    return new Promise<void>((resolve, reject) => {
60.  
    try {
61.  
    const scriptNode = document.createElement('script')
62.  
    scriptNode.setAttribute('type', 'text/javascript')
63.  
    scriptNode.setAttribute('src', url)
64.  
    document.head.appendChild(scriptNode)
65.  
    scriptNode.onload = () => {
66.  
    resolve()
67.  
    }
68.  
    } catch (err) {
69.  
    const scriptNode = document.createElement('script')
70.  
    scriptNode.setAttribute('type', 'text/javascript')
71.  
    scriptNode.onerror = reject
72.  
    }
73.  
    })
74.  
    }

3.  创建store，以供支持在其他文件调用生成的数据

1.  
   // store 下 geoLocation.ts
2.  
   import { defineStore } from 'pinia'
3.  
   import loadBMap from '@/utils/loadBMap'
4.  
    
5.  
   interface ICoordinateInfo {
6.  
   lng: string
7.  
   lat: string
8.  
   }
9.  
   interface IAddressInfo {
10.  
    city: string
11.  
    }
12.  
     
13.  
    export const useGeoLocationStore = defineStore('geographicalLocation', {
14.  
    state: () => {
15.  
    return {
16.  
    provinceAndCityInfo: {
17.  
    cityName: '',
18.  
    provinceName: '',
19.  
    },
20.  
    coordinateInfo: {
21.  
    lng: '',
22.  
    lat: '',
23.  
    },
24.  
    }
25.  
    },
26.  
    getters: {
27.  
    getProvinceAndCityInfo(): ILocationInfo {
28.  
    return this.provinceAndCityInfo
29.  
    },
30.  
     
31.  
    getCoordinateInfo(): ICoordinateInfo {
32.  
    return this.coordinateInfo
33.  
    },
34.  
    },
35.  
    actions: {
36.  
    async setLocationInfo() {
37.  
    navigator.geolocation.getCurrentPosition(async () => {
38.  
    // 借助navigator访问用户是否给权限获取地址, pc和mobile都可用,如给了权限就继续执行，不给权限就会自动return
39.  
    await loadBMap()
40.  
    const BMap = window.BMap
41.  
    // 根据Geolocation会更准确些，LocalCity是通过IP在百度地图数据库查询位置，不准确的概率比较大
42.  
    const geolocation = new BMap.Geolocation()
43.  
    await geolocation.getCurrentPosition(async (result: { point: ICoordinateInfo; address: IAddressInfo }) => {
44.  
    if (geolocation.getStatus() === 0) {
45.  
    this.coordinateInfo = Object.assign(result.point)
46.  
    this.provinceAndCityInfo = Object.assign(result.address)
47.  
    }
48.  
    })
49.  
    })
50.  
    },
51.  
    },
52.  
    })
53.  
     
54.  
     

4 .在需要调用的页面调用定位

1.  
   import { useGeoLocationStore } from '@/store/modules/geoLocation'
2.  
   const GEOLocationStore = useGeoLocationStore()
3.  
   GEOLocationStore.setLocationInfo()

        我目前没有用到地图实例，所以就不列出来了待后续更新。。。。。。

对你有用的话留个赞啊

这篇好文章是转载于：学新通技术网