# react-baidu-maps ## Features - React components for Baidu Maps. - Custom config supported. ## Installation ```bash npm install react-baidu-maps --save ``` ## Usage ### Getting Started You need to obtain a Baidu Maps AK through [Baidu LBS Platform](http://lbsyun.baidu.com/apiconsole/key). Then import Baidu Maps script into your `index.html`. ```html ``` Use Baidu Maps statically: ```js import { BaiduMap } from 'react-baidu-maps'; ReactDOM.render(
} />
, container); ``` Use Baidu Maps dynamically with asynchronous load: ```js import { asyncWrapper } from 'react-baidu-maps'; const AsyncMap = asyncWrapper(BaiduMap); ReactDOM.render(
Loading.....
} mapContainer={
} />
, container); ``` ### Handle Events All events are mapped to React props with name like 'on + {event name}'(e.g. tilesloaded => onTilesloaded, resize => onResize)，the first letter of event name should be capitalized. ```js ReactDOM.render(
} />
, container); ``` ### Overlays All Baidu Maps overlays are supported. ### Marker ```js Loading.....} mapContainer={
} > ``` ### Circle ```js ``` ### Curve ```js const polygon = [ { lng: 116.387112, lat: 39.920977 }, { lng: 116.394226, lat: 39.917988 }, { lng: 116.401772, lat: 39.921364 }, { lng: 116.41248, lat: 39.927893 } ]; ``` ### GroundOverlay ```js ``` ### Label ```js
} mapContainer={
} > ``` ### ScaleControl ```js ``` ### MapTypeControl ```js ``` ### OverviewMapControl ```js ``` ### GeolocationControl ```js { let address = ''; address += e.addressComponent.province; address += e.addressComponent.city; address += e.addressComponent.district; address += e.addressComponent.street; address += e.addressComponent.streetNumber; console.warn(`Current Location: ${address}`); }} /> ``` ### CopyrightControl ```js 我是自定义版权控件
", bounds: { sw: { lng: 116.055026, lat: 39.591042 }, ne: { lng: 116.752974, lat: 40.237421 } } }]} /> ``` ### Subway ```js Loading.....} id='asyncmap1' mapContainer={
} city='289' /> ``` ### Subway Maker ```js ``` ### Subway Zoom Control ```js ```