# vue3-baidu-map-gl

**Repository Path**: yue1123/vue3-baidu-map-gl

## Basic Information

- **Project Name**: vue3-baidu-map-gl
- **Description**: 🎉百度地图 GL版 Vue3 组件库，baidu map gl components libary based on Vue3.0

此仓库不更新，最新见 github
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://yue1123.github.io/vue3-baidu-map-gl/zh-CN/
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 2
- **Created**: 2022-12-14
- **Last Updated**: 2025-06-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 百度地图, 百度地图GL, BMapGL, vue3组件库, 百度地图组件库

## README

<p align="center">
  <a href="https://yue1123.github.io/vue3-baidu-map-gl/zh-CN" target="_blank" rel="noopener noreferrer">
  <img src='https://github.com/yue1123/vue3-baidu-map-gl/blob/main/docs/public/logo.svg' crossorigin="anonymous" style="overflow:hidden; width:180px;height:180px;border-radius:48px;">
  </a>
</p>

<h1 align="center"><img src="https://user-images.githubusercontent.com/74038190/213844263-a8897a51-32f4-4b3b-b5c2-e1528b89f6f3.png" width="50px" />&nbsp;Vue3 BaiduMap Gl&nbsp;<img src="https://user-images.githubusercontent.com/74038190/213844263-a8897a51-32f4-4b3b-b5c2-e1528b89f6f3.png" width="50px" /></h1>

<p align="center">易用 & 完整 & 高性能</p>
<p align="center">
<img src="https://img.shields.io/github/license/yue1123/img-previewer?style=flat-square" alt="" />
<img src="https://img.shields.io/github/package-json/v/yue1123/vue3-baidu-map-gl?color=f90&style=flat-square" alt="GitHub package.json version (subfolder of monorepo)"/>
<img alt="npm" src="https://img.shields.io/npm/dm/vue3-baidu-map-gl?logo=npm&style=flat-square" />
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/yue1123/vue3-baidu-map-gl?style=flat-square&color=%23daaa3f">
<img alt="GitHub issues" src="https://img.shields.io/github/issues/yue1123/vue3-baidu-map-gl?style=flat-square" />
<img alt="GitHub closed issues" src="https://img.shields.io/github/issues-closed/yue1123/vue3-baidu-map-gl?style=flat-square">
<br />

<a href="https://play.vuejs.org/#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" target="_blank" rel="noopener noreferrer">
  <img src='https://img.shields.io/badge/-Playground%20%E2%86%92-%23493edd?style=flat-square&logo=hackthebox&logoColor=%23fff' />
</a>

</div>
</p>

基于百度地图 JavaScript GL 版（使用了 WebGL 对地图、覆盖物等进行渲染，支持 3D 视角展示地图） API 封装设计的 Vue3 组件/hooks 库，开箱即用。

## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Star.png" alt="Star" width="25" height="25" /> Star

如果喜欢这个项目，右上角给我们点个星星吧，这对我们意义非凡！

<img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Backhand%20Index%20Pointing%20Right.png" alt="Backhand Index Pointing Right" width="55" height="55" /><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Glowing%20Star.png" alt="Glowing Star" width="55" height="55" /><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Backhand%20Index%20Pointing%20Left.png" alt="Backhand Index Pointing Left" width="55" height="55" />

## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Activities/Sparkles.png" alt="Sparkles" width="25" height="25" /> 特性

- 🚀 自动加载百度地图 SDK，将百度地图繁琐的 Api 封装进组件，你只需关注组件本身
- 📦 20+ 高质量的开箱即用 Vue 3 组件以及 8+ hooks 封装
- 📐 遵循直觉的、简约的 Api 设计
- ⚡ Composition Api，更好的性能
- 🔨 完整的 TypeScript 支持，更好的体验
- 🧩 tree shaking 支持，模块分包，只打包你想要的的
- 🌏 基于百度地图 Gl 版 SDK，通过 WebGL 对地图、覆盖物等进行渲染，支持 3D 视角展示地图
- 🚀 支持 volar，组件提供完善的代码提示

## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Gear.png" alt="Gear" width="25" height="25" /> 安装

推荐使用 pnpm 安装

```bash
# with pnpm
pnpm add vue3-baidu-map-gl

# or with yarn
yarn add vue3-baidu-map-gl

# or with npm
npm install vue3-baidu-map-gl
```

## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Open%20Book.png" alt="Open Book" width="25" height="25" /> 文档

[中文](https://yue1123.github.io/vue3-baidu-map-gl/)

## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Red%20Heart.png" alt="Red Heart" width="25" height="25" /> 赞助

此项目使用 MIT 协议，完全免费使用，如果您觉得项目对您有帮助，可以考虑适当的 [赞助](https://yue1123.github.io/vue3-baidu-map-gl/sponsor) 支持此项目的开发

## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Hammer%20and%20Wrench.png" alt="Hammer and Wrench" width="25" height="25" /> 开发参与贡献

```bash
# 环境
# pnpm >= 6.0.0
# node >= 12.0.0

# clone
git clone https://github.com/yue1123/vue3-baidu-map-gl
cd ./vue3-baidu-map-gl

# install
pnpm install

# 运行文档站点，用来测试组件，预览文档
pnpm docs:dev
```

## <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Star.png" alt="Star" width="25" height="25" /> Star History

[![Star History Chart](https://api.star-history.com/svg?repos=yue1123/vue3-baidu-map-gl&type=Timeline)](https://star-history.com/#yue1123/vue3-baidu-map-gl&Timeline)

## License

[MIT licenses](https://opensource.org/licenses/MIT)