基于百度地图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。
可查看示例文件夹下的示例使用示例代码,示例效果可访问预览地址
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
密钥可去百度地图开放平台官网申请
npm install react-bmap
<script src="http://huiyan-fe.github.io/react-bmap/dist/react-bmap.min.js"></script>
入口命名空间window.ReactBMap 示例预览 示例源码
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 center={{lng: 116.402544, lat: 39.928216}} zoom="12" />
<Marker position={{lng: 116.402544, lat: 39.928216}}/>
<NavigationControl />
<MapTypeControl />
<ScaleControl />
<OverviewMapControl />
<InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="信息窗口内容" title="信息窗口标题"/>
<Circle
center={{lng: 116.403119, lat: 39.929543}}
fillColor='blue'
strokeColor='white'
radius="3000"
/>
<Polyline
strokeColor='green'
path={[
{lng: 116.403119, lat: 39.929543},
{lng: 116.265139, lat: 39.978658},
{lng: 116.217996, lat: 39.904309}
]}
/>
<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
data={[
{
text: "长沙大道",
location: "113.22183,28.191712"
},
{
text: "机场高速",
location: "113.057565,28.175208"
}
]}
fillStyle="#ff3333"
animation={true}
isShowShadow={false}
multiple={true}
autoViewport={true}
/>
<MapvLayer data={[]} options={{}} />
<Road roadPath={['116.330484,40.031406,116.33124,40.029496,116.33124,40.029496']}/>
<Boundary data={[
{
name: '海淀区',
count: 20
},
{
name: '朝阳区',
count: 10
}
]}/>
TrafficLayer 交通路况图层 示例代码
<TrafficLayer />
如果你使用 BMapLib
,需要 BMap.Map
实例的话,可以通过 <Map>
组件实例的 map
属性访问到它。
<Map ref={ref => this.map = ref.map} />