react-bmap

react-bmap

Usage no npm install needed!

<script type="module">
  import reactBmap from 'https://cdn.skypack.dev/react-bmap';
</script>

README

React-BMap

npm version Package Quality

基于百度地图JavaScript Api封装的React组件库，使用这个库最好需要先了解React和百度地图JavaScript Api。

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。新的GL版地图支持无级缩放、地图倾斜、旋转等强大的功能，并且能更好的发挥MapVGL炫酷的可视化效果。
PS：由于3D地图基于WebGL开发，部分功能与2D版体验可能有差别，如果您的设备不支持WebGL，或者更追求稳定性，依然可以选择本组件库。

示例

可查看示例文件夹下的示例使用示例代码，示例效果可访问预览地址

安装使用

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

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

密钥可去百度地图开放平台官网申请

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

npm install react-bmap

支持UMD规范的打包库

<script src="http://huiyan-fe.github.io/react-bmap/dist/react-bmap.min.js"></script>

入口命名空间window.ReactBMap 示例预览 示例源码

Hello World

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

<Map center={{lng: 116.402544, lat: 39.928216}} zoom="11">
    <Marker position={{lng: 116.402544, lat: 39.928216}} />
    <NavigationControl /> 
    <InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="内容" title="标题"/>
</Map>

基础地图组件文档

Map

<Map center={{lng: 116.402544, lat: 39.928216}} zoom="12" />

Marker

<Marker position={{lng: 116.402544, lat: 39.928216}}/>

Control

<NavigationControl />
<MapTypeControl />
<ScaleControl />
<OverviewMapControl />

InfoWindow

<InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="信息窗口内容" title="信息窗口标题"/>

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

Circle

<Circle 
    center={{lng: 116.403119, lat: 39.929543}} 
    fillColor='blue' 
    strokeColor='white' 
    radius="3000"
/>

Polyline

<Polyline 
    strokeColor='green' 
    path={[
        {lng: 116.403119, lat: 39.929543},
        {lng: 116.265139, lat: 39.978658},
        {lng: 116.217996, lat: 39.904309}
    ]}
/>

Polygon

<Polygon 
    fillColor='red' 
    strokeColor='yellow' 
    path={[
        {lng: 116.442519, lat: 39.945597},
        {lng: 116.484488, lat: 39.905315},
        {lng: 116.443094, lat: 39.886494},
        {lng: 116.426709, lat: 39.900001}
    ]}
/>

其它一些场景组件

MarkerList

<MarkerList 
    data={[
        {
            text: "长沙大道",
            location: "113.22183,28.191712"
        },
        {
            text: "机场高速",
            location: "113.057565,28.175208"
        }
    ]} 
    fillStyle="#ff3333" 
    animation={true} 
    isShowShadow={false} 
    multiple={true} 
    autoViewport={true}
/>

MapvLayer

<MapvLayer data={[]} options={{}} />

MapvglLayer

<MapvglView effects={['bloom']}>
    <MapvglLayer
        type="LineLayer"
        data={data}
        options={{
            blend: 'lighter',
            width: 10,
            color: 'rgb(255, 153, 0, 0.6)'
        }}
    />
</MapvglView>

Road

<Road roadPath={['116.330484,40.031406,116.33124,40.029496,116.33124,40.029496']}/>

Boundary

<Boundary data={[
    {
        name: '海淀区',
        count: 20
    },
    {
        name: '朝阳区',
        count: 10
    }
]}/>

TrafficLayer 交通路况图层 示例代码

<TrafficLayer />

获取 BMap.Map 实例

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

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

许可证

MIT