https://github.com/huiyan-fe/react-bmap

基于百度地图JavaScript API封装的React组件库
https://github.com/huiyan-fe/react-bmap

bmap javascript map react

Last synced: about 2 months ago
JSON representation

基于百度地图JavaScript API封装的React组件库

• Host: GitHub
• URL: https://github.com/huiyan-fe/react-bmap
• Owner: huiyan-fe
• License: mit
• Created: 2017-06-16T07:02:57.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-01-02T09:34:58.000Z (9 months ago)
• Last Synced: 2024-07-13T16:44:21.981Z (2 months ago)
• Topics: bmap, javascript, map, react
• Language: JavaScript
• Homepage: http://huiyan-fe.github.io/react-bmap
• Size: 4.48 MB
• Stars: 497
• Watchers: 22
• Forks: 97
• Open Issues: 46
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-star-libs - huiyan-fe / react-bmap

README

        
# [React-BMap](https://huiyan-fe.github.io/react-bmap/) 

[![npm version](https://img.shields.io/npm/v/react-bmap.svg)](https://www.npmjs.com/package/react-bmap)

[![Package Quality](http://npm.packagequality.com/shield/react-bmap.svg)](http://packagequality.com/#?package=react-bmap)

基于百度地图JavaScript Api封装的React组件库，使用这个库最好需要先了解[React](https://facebook.github.io/react/)和[百度地图JavaScript Api](http://lbsyun.baidu.com/index.php?title=jspopular)。

React-BMap只是利用了React组件的生命周期，来调用对应的百度地图JavaScript Api的方法，比如在componentDidMount和componentDidUpdate的时候在地图上添加覆盖物，componentWillUnmount的时候移除覆盖物，React对应的render渲染函数模块返回的是null。所以这里面地图相关的dom并不是react渲染的，真正创建地图之类的还是使用百度地图JavaScript Api，React-BMap只是利用了React组件的写法来封装百度地图JavaScript Api，使我们在使用React的时候能更方便的使用百度地图JavaScript Api。

## 3D地图版本

该组件库是针对2D版本地图的React组件库，如果想使用新版本的3D地图，请使用[React-BMapGL](https://github.com/huiyan-fe/react-bmapgl)。新的GL版地图支持无级缩放、地图倾斜、旋转等强大的功能，并且能更好的发挥[MapVGL](https://mapv.baidu.com/gl/docs/index.html)炫酷的可视化效果。  

**PS：由于3D地图基于WebGL开发，部分功能与2D版体验可能有差别，如果您的设备不支持WebGL，或者更追求稳定性，依然可以选择本组件库。**

## 示例

可查看示例文件夹下的示例使用[示例代码](https://github.com/huiyan-fe/react-bmap/tree/master/docs/examples)，示例效果可访问[预览地址](https://huiyan-fe.github.io/react-bmap/examples/)

## 安装使用

### 页面头部需加载百度地图JavaScript Api代码

    

密钥可去[百度地图开放平台官网](http://lbsyun.baidu.com/apiconsole/key)申请

### 推荐使用npm方式安装使用，然后通过es6模块加载

    npm install react-bmap

### 支持UMD规范的打包库

    

入口命名空间window.ReactBMap [示例预览](http://huiyan-fe.github.io/react-bmap/examples/umd.html) [示例源码](https://github.com/huiyan-fe/react-bmap/blob/master/docs/examples/umd.html)

## Hello World

    import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmap'

    

        

         

        

    

    

## 基础地图组件文档

### [Map](./src/components/map.md)

    

### [Marker](./src/components/marker.md)

    





### [Control](./src/components/control.md)

    

    

    

    

### [InfoWindow](./src/components/infowindow.md)

    

## 图形组件，圆形、折线、多边形组件



### Circle

    

### Polyline

    

### Polygon

    

## 其它一些场景组件

### MarkerList



    

### MapvLayer

    

### MapvglLayer

    

        

    

### Road

    

### Boundary 

    

### TrafficLayer 交通路况图层 示例代码

    

    

## 获取 `BMap.Map` 实例

如果你使用 `BMapLib`，需要 `BMap.Map` 实例的话，可以通过 `` 组件实例的 `map` 属性访问到它。

     {this.map = ref.map}} />

## 许可证

[MIT](./LICENSE)