React Baidu Map

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

Installation

$ npm install --save react-baidu-map

Demo

Usage

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';classExampleAppextendsReact.Component{render(){return(<div><inputonChange={this.onChange.bind(this)}/><BaiduMapid="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:

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

API

Props

• 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.

Methods

search(text: string): void

Search by keyword from the created map context.

License

MIT Licensed and WeFlex Copyright