├── .babelrc
├── .gitignore
├── .npmignore
├── README.md
├── demo.gif
├── index.jsx
├── package.json
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["react", "es2015"]
3 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | ./demo.gif
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Baidu Map
 2 | 
 3 | [![NPM version][npm-image]][npm-url]
 4 | [![Build status][travis-image]][travis-url]
 5 | [![Dependency Status][david-image]][david-url]
 6 | [![Downloads][downloads-image]][downloads-url]
 7 | 
 8 | react component to work with baidu javascript API which enables you search, pinch and more
 9 | 
10 | ## Installation
11 | 
12 | ```sh
13 | $ npm install --save react-baidu-map
14 | ```
15 | 
16 | ## Demo
17 | 
18 | ![demo](./demo.gif)
19 | 
20 | ## Usage
21 | 
22 | The following is an example to show how it works with a search input to get
23 | position of every marker from the map in real-time.
24 | 
25 | ```jsx
26 | import { BaiduMap } from 'react-baidu-map';
27 | 
28 | class ExampleApp extends React.Component {
29 |   render() {
30 |     return (
31 |       <div>
32 |         <input onChange={this.onChange.bind(this)} />
33 |         <BaiduMap id="location" ref="location" style={{height: 300}}
34 |           onSelect={this.onSelect} />
35 |       </div>
36 |     );
37 |   }
38 |   onChange(event) {
39 |     this.refs.location.search(event.target.value);
40 |   }
41 |   onSelect(point) {
42 |     // point.lng
43 |     // point.lat
44 |   }
45 | }
46 | ```
47 | 
48 | Before you start working on coding with Baidu API, you should add script to your main script:
49 | 
50 | ```html
51 | <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your_key"></script>
52 | ```
53 | 
54 | ## API
55 | 
56 | ### Props
57 | 
58 | - `id` {String} the id to create the map element in DOM tree, default value: "allmap".
59 | - `style` {Object} the style sheet to apply to the root element of this component.
60 | - `onSelect` {Function} this function will be fired when user click a marker and the info bubble is shown
61 |   - `point` {Point} the position of being clicked to some maker
62 |     - `lng` {String} the `lng` of the point.
63 |     - `lat` {String} the `lat` of the point.
64 | 
65 | ### Methods
66 | 
67 | ##### `search(text: string): void`
68 | 
69 | Search by keyword from the created map context.
70 | 
71 | ## License
72 | 
73 | MIT Licensed and WeFlex Copyright
74 | 
75 | [npm-image]: https://img.shields.io/npm/v/react-baidu-map.svg?style=flat-square
76 | [npm-url]: https://npmjs.org/package/react-baidu-map
77 | [travis-image]: https://img.shields.io/travis/weflex/react-baidu-map.svg?style=flat-square
78 | [travis-url]: https://travis-ci.org/weflex/react-baidu-map
79 | [david-image]: http://img.shields.io/david/weflex/react-baidu-map.svg?style=flat-square
80 | [david-url]: https://david-dm.org/weflex/react-baidu-map
81 | [downloads-image]: http://img.shields.io/npm/dm/react-baidu-map.svg?style=flat-square
82 | [downloads-url]: https://npmjs.org/package/react-baidu-map
83 | 
84 | 


--------------------------------------------------------------------------------
/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weflex/react-baidu-map/0cb458bec3b87d00c1c5b0a3c9f06a111cbe7289/demo.gif


--------------------------------------------------------------------------------
/index.jsx:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | const React = require('react');
 3 | 
 4 | /**
 5 |  * @class BaiduMap
 6 |  */
 7 | class BaiduMap extends React.Component {
 8 |   /**
 9 |    * @constructor
10 |    * @id {String} the id to create DOM id
11 |    */
12 |   constructor(props) {
13 |     super(props);
14 |     this.id = props.id || 'allmap';
15 |   }
16 |   /**
17 |    * @method componentDidMount
18 |    */
19 |   componentDidMount() {
20 |     this._map = new BMap.Map(this.id);
21 |     this._map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
22 |     this._local = new BMap.LocalSearch(this._map, {
23 |       renderOptions: { map: this._map },
24 |       onInfoHtmlSet: poi => {
25 |         if (typeof this.props.onSelect === 'function') {
26 |           this.props.onSelect(poi.marker.getPosition());
27 |         }
28 |       }
29 |     });
30 |   }
31 |   /**
32 |    * @method render
33 |    */
34 |   render() {
35 |     return <div id={this.id} {...this.props}></div>;
36 |   }
37 |   /**
38 |    * @method search
39 |    * @param {String} text - the search keyword
40 |    */
41 |   search(text) {
42 |     this._local.search(text);
43 |   }
44 | }
45 | 
46 | BaiduMap.propTypes = {
47 |   /**
48 |    * the id to create DOM id
49 |    */
50 |   id: React.PropTypes.string,
51 |   /**
52 |    * this function will be fired when user click a marker and the info bubble is shown
53 |    */
54 |   onSelect: React.PropTypes.func
55 | };
56 | 
57 | export default BaiduMap;
58 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-baidu-map",
 3 |   "version": "1.3.5",
 4 |   "description": "react component to work with baidu javascript API which enables you search, pinch and more",
 5 |   "main": "dist/react-baidu-map.js",
 6 |   "scripts": {
 7 |     "build": "./node_modules/.bin/webpack",
 8 |     "prepublish": "npm run build"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+ssh://git@github.com/weflex/react-baidu-map.git"
13 |   },
14 |   "keywords": [
15 |     "react",
16 |     "react-component",
17 |     "baidu",
18 |     "map",
19 |     "mapv"
20 |   ],
21 |   "author": "Yorkie Liu <yorkiefixer@gmail.com>",
22 |   "license": "MIT",
23 |   "bugs": {
24 |     "url": "https://github.com/weflex/react-baidu-map/issues"
25 |   },
26 |   "homepage": "https://github.com/weflex/react-baidu-map#readme",
27 |   "devDependencies": {
28 |     "babel-core": "6.3.26",
29 |     "babel-loader": "6.2.0",
30 |     "babel-preset-es2015": "6.3.13",
31 |     "babel-preset-react": "6.3.13",
32 |     "webpack": "1.12.9"
33 |   },
34 |   "dependencies": {
35 |     "react": "0.14.3"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | module.exports = {
 4 |   entry: './index.jsx',
 5 |   output: {
 6 |     path: './dist',
 7 |     filename: 'react-baidu-map.js'
 8 |   },
 9 |   resolve: {
10 |     extensions: ['', '.jsx', '.js']
11 |   },
12 |   module: {
13 |     loaders: [
14 |       {
15 |         test: /\.jsx$/,
16 |         exclude: /node_modules/,
17 |         loader: 'babel',
18 |         query: {
19 |           presets: ['react', 'es2015']
20 |         }
21 |       },
22 |       {
23 |         test: /\.js$/,
24 |         exclude: /node_modules/,
25 |         loader: 'babel',
26 |         query: {
27 |           presets: ['es2015']
28 |         }
29 |       }
30 |     ]
31 |   },
32 |   externals: {
33 |     'react': 'react',
34 |   }
35 | };
36 | 


--------------------------------------------------------------------------------