vueuse-bmap-jsapi

vueuse-bmap-jsapi

Vue 3 组合式 API (Composition API) 封装的百度地图 GL SDK 库。

特性

• ⚡ 现代化技术栈：基于 Vue 3 Composition API 与 TypeScript 开发，提供极致类型提示。
• 🔄 响应式生命周期：支持基于 DOM 元素或 ref 容器的响应式挂载与自动清理，防止内存泄漏。
• 📦 开箱即用：内置百度地图 JSAPI 异步加载器，支持全局单例配置与二次校验。
• 🧩 多包协同：与 vueuse-bmap-vgl 深度协同，无缝配合百度 MapVGL 可视化图层库。

安装

# npm
npm install vueuse-bmap-jsapi vue

# pnpm
pnpm add vueuse-bmap-jsapi vue

快速上手

1. 初始化百度地图 SDK

在应用入口（如 main.ts）配置您的百度地图 AK：

import { createApp } from 'vue'
import App from './App.vue'
import { initBamp } from 'vueuse-bmap-jsapi'

await initBamp({ ak: 'YOUR_BMAP_AK' })

createApp(App).mount('#app')

2. 在组件中使用

<template>
  <div ref="container" style="width: 100%; height: 500px;" />
</template>

<script setup lang="ts">
import { useBmap } from 'vueuse-bmap-jsapi'

const { container, bmap } = useBmap({
  zoom: 13,
  center: { lng: 116.404, lat: 39.915 },
})
</script>

License

MIT