NPM version Build status Dependency Status Downloads

react component to work with baidu javascript API which enables you search, pinch and more

$ npm install --save react-baidu-map

demo

The following is an example to show how it works with a search input to get position of every marker from the map in real-time.

import { BaiduMap } from 'react-baidu-map';
class ExampleApp extends React.Component {
 render() {
 return (
 <div>
 <input onChange={this.onChange.bind(this)} />
 <BaiduMap id="location" ref="location" style={{height: 300}}
 onSelect={this.onSelect} />
 </div>
 );
 }
 onChange(event) {
 this.refs.location.search(event.target.value);
 }
 onSelect(point) {
 // point.lng
 // point.lat
 }
}

Before you start working on coding with Baidu API, you should add script to your main script:

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

• id {String} the id to create the map element in DOM tree, default value: "allmap".
• style {Object} the style sheet to apply to the root element of this component.
• onSelect {Function} this function will be fired when user click a marker and the info bubble is shown
  • point {Point} the position of being clicked to some maker
    • lng {String} the lng of the point.
    • lat {String} the lat of the point.

Search by keyword from the created map context.

MIT Licensed and WeFlex Copyright