inject __ele__ & __map__ to every child of Map component

Author: ioslh

CHANGELOG.md

@@ -1,5 +1,12 @@
 # 更新日志
 
+## [2017-06-14] 1.0.0
+
+### 重大更新
+
+* 现在 react-amap 拥有了扩展能力，你可以自己写一个地图组件并且在 Map 中嵌入；相关文档请参考[自定义地图组件](https://elemefe.github.io/react-amap/articles/extend)。
+
+---
 
 ## [2017-05-11] 0.2.7
 

_theme/static/main.css

@@ -7,7 +7,6 @@ body{
     /* background: linear-gradient(to right bottom, #ffdc79, #c4e4a2, #0090ff); */
 }
 
-
 ::-webkit-scrollbar {
     width: 8px;
     border-left: 1px solid #aaa;

articles/changelog.md

@@ -4,6 +4,13 @@ title: 更新日志
 order: 11
 ---
 
+## [2017-06-14] 1.0.0
+
+### 重大更新
+
+* 现在 react-amap 拥有了扩展能力，你可以自己写一个地图组件并且在 Map 中嵌入；相关文档请参考[自定义地图组件](/articles/extend)。
+
+---
 
 ## [2017-05-11] 0.2.7
 

articles/extend.md

@@ -0,0 +1,95 @@
+---
+title: 自定义地图组件
+order: 2
+---
+
+
+### 如何写一个自定义的地图组件
+
+react-amap 组件库目前包含的组件是有限的，所以最常碰到的疑问是：
+
+> 如果我想要的地图组件在 react-amap 中没有怎么办？
+
+现在，react-amap 拥有了扩展能力，你现在可以自己写一个地图组件了。然后，你就可以像这样使用你的组件，比如：
+
+```jsx
+const MyMapComponent = (props) => {
+  // props.__ele__;
+  // props.__map__;
+  // your code here
+};
+
+// render here
+<Map>
+  <MyMapComponent />
+</Map>
+```
+
+我们会给 Map 组件的所有子组件注入两个属性：地图实例，和地图容器；在你的组件内部，你可以:
+
+1. 通过 props 的 `__ele__` 属性访问到地图创建时的 div 容器；
+2. 通过 props 的 `__map__` 属性访问创建好的高德地图实例；
+
+拥有访问这两个属性的能力后，你可以根据高德原生 API 做高德允许你做的一切事情。实际上，react-amap 中的其他组件就是这么做的。
+
+下面的例子中，我们写了一个自定义的 `ZoomCtrl` 组件，来定义一个自己的地图 zoom 控制器。
+
+```jsx
+import { Map } from 'react-amap';
+
+const ZoomCtrl = (props) => {
+  const map = props.__map__;
+  if (!map) {
+    console.log('组件必须作为 Map 的子组件使用');
+    return;
+  }
+  const style = {
+    position: 'absolute',
+    top: '10px',
+    left: '10px',
+    background: '#fff',
+    padding: '10px'
+  }
+  const zoomIn = () => map.zoomIn();
+  const zoomOut = () => map.zoomOut();
+
+  return (<div style={style}>
+    <button onClick={zoomIn}>zoom in</button>
+    <button onClick={zoomOut}>zoom out</button>
+  </div>);
+};
+
+class App extends React.Component {
+  render() {
+    return <div style={{width: '100%', height: '400px'}}>
+      <Map>
+        <ZoomCtrl />
+      </Map>
+    </div>
+  }
+}
+
+ReactDOM.render(
+  <App/>,
+  mountNode
+)
+```
+
+
+
+
+默认情况下， react-amap 会给所有 Map 的子组件注入 `__ele__`, `__map__` 这两个属性，如果你明确不需要注入，可以设置组件的 `preventAmap` 属性为 `true`。
+
+```jsx
+const MyNormalComponent = (props) => {
+  // props.__ele__ 和 props.__map__ 都是 undefined
+  // your code here
+};
+
+MyNormalComponent.preventAmap = true;
+
+// render here
+<Map>
+  <MyNormalComponent />
+</Map>
+```

articles/high.md

@@ -1,7 +1,7 @@
 ---
 category: Article
 title: 更复杂的需求
-order: 2
+order: 3
 ---
 
 `react-amap` 是基于 React 对高德地图的进一步封装，有些时候你可能有更复杂的需求需要实现。

components/map/index.js

@@ -18,16 +18,6 @@ import MouseTool from '../mousetool';
 
 const Component = React.Component;
 const Children = React.Children;
-const ComponentList = [
-  Circle,
-  GroundImage,
-  InfoWindow,
-  Markers,
-  Marker,
-  Polyline,
-  Polygon,
-  MouseTool
-];
 
 const configurableProps = [
   'layers',
@@ -146,7 +136,12 @@ class Map extends Component {
   renderChildren() {
     return Children.map(this.props.children, (child) => {
       if (child) {
-        if (ComponentList.indexOf(child.type) === -1) {
+        const cType = child.type;
+        /* 针对下面两种组件不注入地图相关属性
+         * 1. 明确声明不需要注入的
+         * 2. DOM 元素
+         */
+        if (cType.preventAmap || (typeof cType === 'string')) {
           return child;
         }
         return React.cloneElement(child, {
@@ -160,22 +155,6 @@ class Map extends Component {
 
   initMapInstance() {
     if (!this.map) {
-      // let opts = {};
-      // if ('createOptions' in this.props) {
-      //   opts = this.props.createOptions;
-      // } else {
-      //   if ('zoom' in this.props) {
-      //     opts.zoom = this.props.zoom;
-      //     this.prevZoom = opts.zoom;
-      //   }
-      //   if ('center' in this.props) {
-      //     opts.center = new window.AMap.LngLat(
-      //       this.props.center.longitude,
-      //       this.props.center.latitude
-      //     );
-      //     this.prevCenter = opts.center;
-      //   }
-      // }
       const options = this.buildCreateOptions();
       this.map = new window.AMap.Map(this.mapWrapper, options);
       const events = this.exposeMapInstance();