react-baidu-map

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

Github星跟踪图

React Baidu Map

NPM version
Build status
Dependency Status
Downloads

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

Installation

$ npm install --save react-baidu-map

Demo

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

主要指标

概览
名称与所有者weflex/react-baidu-map
主编程语言JavaScript
编程语言JavaScript (语言数: 1)
平台
许可证Other
所有者活动
创建于2015-12-23 18:08:01
推送于2016-12-11 02:57:55
最后一次提交2016-12-11 02:57:54
发布数0
用户参与
星数36
关注者数3
派生数11
提交数21
已启用问题?
问题数5
打开的问题数3
拉请求数2
打开的拉请求数0
关闭的拉请求数0
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?