update

README.md

@@ -1,4 +1,4 @@
-# [react-bmap](https://huiyan-fe.github.io/react-bmap/) [![npm version](https://img.shields.io/npm/v/react-bmap.svg)](https://www.npmjs.com/package/react-bmap)
+# [React-BMap](https://huiyan-fe.github.io/react-bmap/) [![npm version](https://img.shields.io/npm/v/react-bmap.svg)](https://www.npmjs.com/package/react-bmap)
 
 基于百度地图JavaScript Api封装的React组件库，使用这个库最好需要先了解[React](https://facebook.github.io/react/)和[百度地图JavaScript Api](http://lbsyun.baidu.com/index.php?title=jspopular)。
 
@@ -38,6 +38,9 @@ React-BMap只是利用了React组件的生命周期，来调用对应的百度
 
     <Marker position={{lng: 116.402544, lat: 39.928216}}/>
 
+![Marker](./docs/assets/screenshot/marker.png)
+
+
 ### [Control](./src/components/control.md)
 
     <NavigationControl />
@@ -49,7 +52,7 @@ React-BMap只是利用了React组件的生命周期，来调用对应的百度
 
     <InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="信息窗口内容" title="信息窗口标题"/>
 
-## 图形组件，圆形、折线、多边形
+## 图形组件，圆形、折线、多边形组件
 
 ### Circle
 
@@ -86,6 +89,26 @@ React-BMap只是利用了React组件的生命周期，来调用对应的百度
 
 ## 其它一些场景组件
 
+### MarkerList
+
+    <MarkerList 
+        data={[
+            {
+                text: "长沙大道",
+                location: "113.22183,28.191712"
+            },
+            {
+                text: "机场高速",
+                location: "113.057565,28.175208"
+            }
+        ]} 
+        fillStyle="#ff3333" 
+        animation={true} 
+        isShowShadow={false} 
+        multiple={true} 
+        autoViewport={true}
+    />
+
 ### MapvLayer
 
     <MapvLayer data={[]} options={{}} />
@@ -94,5 +117,8 @@ React-BMap只是利用了React组件的生命周期，来调用对应的百度
 
     <Road roadPath={['116.330484,40.031406,116.33124,40.029496,116.33124,40.029496']}/>
 
+### TrafficLayer
+    <TrafficLayer />
+
 ## 许可证
 [MIT](./LICENSE)

docs/examples/components/index.js

@@ -10,7 +10,7 @@ import Road from './road';
 import Boundary from './boundary';
 import Control from './control';
 import React from 'react';
-import { render } from 'react-dom';
+import {render} from 'react-dom';
 
 const examples = (
   <div>
@@ -25,12 +25,10 @@ const examples = (
     <Control />
     <h2>图形覆盖物 Circle Polyline Polygon <a href="https://github.com/huiyan-fe/react-bmap/blob/master/docs/examples/components/graphy.js">示例代码</a></h2>
     <Graphy />
-    <h2>mapv图层 MapvLayer <a href="https://github.com/huiyan-fe/react-bmap/blob/master/docs/examples/components/mapv-layer.js">示例代码</a></h2>
+    <h2>Mapv图层 MapvLayer <a href="https://github.com/huiyan-fe/react-bmap/blob/master/docs/examples/components/mapv-layer.js">示例代码</a></h2>
     <MapvLayer/>
-    <h2>marker列表 MarkerList <a href="https://github.com/huiyan-fe/react-bmap/blob/master/docs/examples/components/marker-list.js">示例代码</a></h2>
+    <h2>标注列表 MarkerList <a href="https://github.com/huiyan-fe/react-bmap/blob/master/docs/examples/components/marker-list.js">示例代码</a></h2>
     <MarkerList />
-    <h2>marker列表 <a href="https://github.com/huiyan-fe/react-bmap/blob/master/docs/examples/components/mapv-marker-list.js">示例代码</a></h2>
-    <MapvMarkerList />
     <h2>道路 Road <a href="https://github.com/huiyan-fe/react-bmap/blob/master/docs/examples/components/road.js">示例代码</a></h2>
     <Road />
     <h2>行政区划 Boundary <a href="https://github.com/huiyan-fe/react-bmap/blob/master/docs/examples/components/boundary.js">示例代码</a></h2>

docs/examples/components/map.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
-import {simpleMapStyle} from './mapstyle'
-import {Map} from '../../../src'
+import {simpleMapStyle} from './mapstyle';
+import {Map} from '../../../src';
 
 export default class App extends Component {
     getEvents() {
@@ -13,7 +13,10 @@ export default class App extends Component {
 
     render() {
         return <Map 
-            mapStyle={simpleMapStyle} // 个性化底图配置
+            style={{height: '150px'}} 
+            center={{lng: '116.403981', lat: '39.927773'}} 
+            zoom='13' 
+            mapStyle={{style: 'midnight'}} // 个性化底图配置
             events={this.getEvents()} // 为地图添加各类监听事件
         />;
     }

docs/examples/components/marker.js

@@ -2,9 +2,53 @@ import React, { Component } from 'react';
 import {Map, Marker} from '../../../src'
 import {simpleMapStyle} from './mapstyle'
 
+var markers = [
+    {
+        lng: 116.402544,
+        lat: 39.928216
+    },
+    {
+        lng: 119.0874,
+        lat: 36.665582
+    },
+    {
+        lng: 112.538537,
+        lat: 37.874899
+    },
+    {
+        lng: 114.501011,
+        lat: 33.920864
+    },
+    {
+        lng: 109.210063,
+        lat: 34.339622
+    },
+    {
+        lng: 99.430831,
+        lat: 38.211366
+    },
+    {
+        lng: 89.430831,
+        lat: 33.311366
+    },
+    {
+        lng: 99.430831,
+        lat: 32.511366
+    },
+    {
+        lng: 79.430831,
+        lat: 35.611366
+    },
+    {
+        lng: 83.430831,
+        lat: 39.711366
+    },
+];
+
 export default class App extends Component {
     render() {
-        return <Map mapStyle={simpleMapStyle}>
+        return <div>
+        <Map mapStyle={simpleMapStyle}>
             <Marker 
                 position={{lng: 116.402544, lat: 39.928216}} 
                 icon="simple_red" 
@@ -20,6 +64,13 @@ export default class App extends Component {
             <Marker position={{lng: 109.210063, lat: 34.339622}} icon="start" />
             <Marker position={{lng: 109.430831, lat: 38.211366}} icon="end" />
         </Map>
+        <Map mapStyle={simpleMapStyle}>
+            {markers.map((marker, index) => {
+                var icon = "red" + (index + 1);
+                return <Marker map={this.props.map} icon={icon} position={{lng: marker.lng, lat: marker.lat}} {...marker} />
+            })}
+        </Map>
+        </div>
     }
 }
 

src/components/boundary.js

@@ -138,10 +138,6 @@ class App extends Component {
 
         this.getBoundaryData();
     }
-
-    render() {
-        return null;
-    }
 }
 
 export default App;

src/components/component.js

@@ -53,4 +53,7 @@ export default class App extends Component {
         return result;
     }
 
+    render() {
+        return null;
+    }
 }

src/components/control.js

@@ -45,7 +45,4 @@ export default class App extends Component {
         return null;
     }
 
-    render() {
-        return null;
-    }
 }

src/components/graphy.js

@@ -76,7 +76,4 @@ export default class App extends Component {
         return null;
     }
 
-    render() {
-        return null;
-    }
 }

src/components/infowindow.js

@@ -67,7 +67,4 @@ export default class App extends Component {
 
     }
 
-    render() {
-        return null;
-    }
 }

src/components/mapv-layer.js

@@ -65,7 +65,4 @@ export default class App extends Component {
 
     }
 
-    render() {
-        return null;
-    }
 }

src/components/marker-list.js

@@ -189,7 +189,4 @@ export default class App extends Component {
         }
     }
 
-    render() {
-        return null;
-    }
 }

src/components/marker.js

@@ -6,6 +6,7 @@
 import Component from './component';
 
 const defaultIconUrl = 'http://webmap1.map.bdstatic.com/wolfman/static/common/images/markers_new2x_fbb9e99.png';
+
 var icons = {
     'simple_red': new BMap.Icon(defaultIconUrl , new BMap.Size(42 / 2, 66 / 2), {
         imageOffset: new BMap.Size(-454 / 2, -378 / 2),
@@ -19,26 +20,34 @@ var icons = {
     }),
     'loc_red': new BMap.Icon(defaultIconUrl , new BMap.Size(46 / 2, 70 / 2), {
         imageOffset: new BMap.Size(-400 / 2, -378 / 2),
-        anchor: new BMap.Size(42 / 2 / 2, 66 / 2 / 2),
+        anchor: new BMap.Size(46 / 2 / 2, 70 / 2 / 2),
         imageSize: new BMap.Size(600 / 2, 600 / 2)
     }),
     'loc_blue': new BMap.Icon(defaultIconUrl , new BMap.Size(46 / 2, 70 / 2), {
         imageOffset: new BMap.Size(-400 / 2, -450 / 2),
-        anchor: new BMap.Size(42 / 2 / 2, 66 / 2 / 2),
+        anchor: new BMap.Size(46 / 2 / 2, 70 / 2 / 2),
         imageSize: new BMap.Size(600 / 2, 600 / 2)
     }),
     'start': new BMap.Icon(defaultIconUrl , new BMap.Size(50 / 2, 80 / 2), {
         imageOffset: new BMap.Size(-400 / 2, -278 / 2),
-        anchor: new BMap.Size(42 / 2 / 2, 66 / 2 / 2),
+        anchor: new BMap.Size(50 / 2 / 2, 80 / 2 / 2),
         imageSize: new BMap.Size(600 / 2, 600 / 2)
     }),
     'end': new BMap.Icon(defaultIconUrl , new BMap.Size(50 / 2, 80 / 2), {
         imageOffset: new BMap.Size(-450 / 2, -278 / 2),
-        anchor: new BMap.Size(42 / 2 / 2, 66 / 2 / 2),
+        anchor: new BMap.Size(50 / 2 / 2, 80 / 2 / 2),
         imageSize: new BMap.Size(600 / 2, 600 / 2)
     }),
 }
 
+for (var i = 1; i <= 10; i++) {
+    icons['red' + i] = new BMap.Icon(defaultIconUrl , new BMap.Size(42 / 2, 66 / 2), {
+        imageOffset: new BMap.Size(0 - 42 / 2 * (i - 1), 0),
+        anchor: new BMap.Size(42 / 2 / 2, 66 / 2 / 2),
+        imageSize: new BMap.Size(600 / 2, 600 / 2)
+    });
+}
+
 export default class App extends Component {
 
     constructor(args) {
@@ -148,7 +157,4 @@ export default class App extends Component {
 
     }
 
-    render() {
-        return null;
-    }
 }

src/components/marker.md

@@ -4,7 +4,7 @@
 ## 可配置属性
 - position={{lng: 123, lat: 23}}
 - offset={new BMap.Size(10, 10)}
-- icon={String|BMap.Icon} 可配置一些我们事先配置好的icon样式，'simple_red','simple_blue','loc_red','loc_blue','start','end',或者可以自定义icon
+- icon={String|BMap.Icon} 可配置一些我们事先配置好的icon样式，'simple_red','simple_blue','loc_red','loc_blue','start','end', 'number1', 'number2', ``` 'number10',或者可以自定义icon
 - enableClicking={false}
 - raiseOnDrag={false}
 - draggingCursor='default'

src/components/road.js

@@ -152,7 +152,4 @@ export default class App extends Component {
         this.canvasLayer.hide();
     }
 
-    render() {
-        return null;
-    }
 }

src/components/scale-control.js

@@ -6,6 +6,7 @@
 import Control from './control';
 
 export default class App extends Control {
+
     constructor(args) {
         super(args);
     }

src/components/traffic-layer.js

@@ -1,6 +1,12 @@
+/**
+ * @file 交通路况图层组件
+ * @author kyle([email protected])
+ */
+
 import Component from './component';
 
 export default class App extends Component {
+
     constructor(args) {
         super(args);
         this.state = {
@@ -41,10 +47,6 @@ export default class App extends Component {
             };
         }
         map.addTileLayer(this.tileLayer);
-
     }
 
-    render() {
-        return null;
-    }
 }