组件库介绍
地图组件库基于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示例 |
这篇文章对您解决问题是否有帮助?
已解决
未解决