Doelove / react-baidu-map

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

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';

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>

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