组件库介绍

地图组件库基于JavaScript API GL开发,提供多种地图场景的组件,适配Vue和React主流框架。开发者仅需调整数据即可实现一个基础地图效果,极大降低开发成本,同时组件库具有灵活的定制化能力满足特殊业务场景。欢迎您接入使用tlbs-map地图组件库并参与到组件库的开源共建。同时,别忘了在GitHub上关注并star组件库项目,以便及时获取最新动态哦!

以下是组件库地址:

Vue组件库地址:https://github.com/Tencent/tlbs-map-vue
Vue组件参考手册:https://mapapi.qq.com/web/tlbs-map-vue/guide/get-started.html

React组件库地址:https://github.com/Tencent/tlbs-map-react
React组件参考手册:https://mapapi.qq.com/web/tlbs-map-react/index.html


特性优势

1.降低使用门槛,提升开发效率:封装腾讯地图API为响应式组件,无需关心复杂的地图API,只需要操作数据即可
2.兼容前端主流框架:tlbs-map支持最流行的2个前端框架Vue框架和React框架,并且做到了一套代码兼容Vue2、Vue3版本的前端项目
3.提升可扩展性:组件提供地图和图层实例,用户可编写自定义组件或直接调用地图API满足定制化需求
4.详尽的文档示例:提供了详尽的组件使用文档和示例代码,可以轻松上手,快速开发
5.提供丰富的地图组件: 已上线基础地图、点、线、面等10个常用组件,助力开发者低成本开发地图业务


效果展示

地图显示

Head Head Head
基础地图 Vue示例 React示例

覆盖物

Head Head Head
点标记 Vue示例 React示例 折线 Vue示例 React示例 多边形 Vue示例 React示例
文本标记 Vue示例 React示例 圆形 Vue示例 点聚合 Vue示例

自定义地图

Head Head Head
自定义DOM覆盖物 Vue示例 信息窗口 Vue示例 React示例

热力图层

Head Head Head
2D 经典热力 Vue示例 React示例 3D 经典热力 Vue示例 React示例

线图层

Head Head Head
弧线图 Vue示例 React示例

面图层

Head Head Head
区域图 Vue示例 React示例

网格热力图层

Head Head Head
2D 网格热力图 Vue示例 React示例 3D 网格热力图 Vue示例 React示例

这篇文章对您解决问题是否有帮助?

已解决
未解决