React-BMap基于百度地圖 api 封裝的 React 組件庫(kù)

React-BMap 

基于百度地圖JavaScript Api封裝的React組件庫(kù)，使用這個(gè)庫(kù)最好需要先了解React和百度地圖JavaScript Api。

React-BMap只是利用了React組件的生命周期，來(lái)調(diào)用對(duì)應(yīng)的百度地圖JavaScript Api的方法，比如在componentDidMount和componentDidUpdate的時(shí)候在地圖上添加覆蓋物，componentWillUnmount的時(shí)候移除覆蓋物，React對(duì)應(yīng)的render渲染函數(shù)模塊返回的是null。所以這里面地圖相關(guān)的dom并不是react渲染的，真正創(chuàng)建地圖之類的還是使用百度地圖JavaScript Api，React-BMap只是利用了React組件的寫(xiě)法來(lái)封裝百度地圖JavaScript Api，使我們?cè)谑褂肦eact的時(shí)候能更方便的使用百度地圖JavaScript Api。

示例

可查看示例文件夾下的示例使用示例代碼，示例效果可訪問(wèn)預(yù)覽地址

安裝使用

頁(yè)面頭部需加載百度地圖JavaScript Api代碼

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

密鑰可去百度地圖開(kāi)放平臺(tái)官網(wǎng)申請(qǐng)

推薦使用npm方式安裝使用，然后通過(guò)es6模塊加載

npm install react-bmap

支持UMD規(guī)范的打包庫(kù)

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

入口命名空間window.ReactBMap 示例預(yù)覽 示例源碼

Hello World

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

<Map center={{lng: 116.402544, lat: 39.928216}}>
    <Marker position={{lng: 116.402544, lat: 39.928216}} />
    <NavigationControl /> 
    <InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="內(nèi)容" title="標(biāo)題"/>
</Map>

基礎(chǔ)地圖組件文檔

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="信息窗口內(nèi)容" title="信息窗口標(biāo)題"/>

圖形組件，圓形、折線、多邊形組件

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}
    ]}
/>

其它一些場(chǎng)景組件

MarkerList

<MarkerList 
    data={[
        {
            text: "長(zhǎng)沙大道",
            location: "113.22183,28.191712"
        },
        {
            text: "機(jī)場(chǎng)高速",
            location: "113.057565,28.175208"
        }
    ]} 
    fillStyle="#ff3333" 
    animation={true} 
    isShowShadow={false} 
    multiple={true} 
    autoViewport={true}
/>

MapvLayer

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

Road

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

Boundary

<Boundary data={[
    {
        name: '海淀區(qū)',
        count: 20
    },
    {
        name: '朝陽(yáng)區(qū)',
        count: 10
    }
]}/>

TrafficLayer 交通路況圖層 示例代碼

<TrafficLayer /