fix for marker.options.icon.

README.md

@@ -57,10 +57,11 @@ npm start
 6. `Polygon.js`为多边形控件,可以用来画行政区域图
 7. `Polyline.js`为多折点线组件,可以用来模拟汽车行驶轨迹
 8. `InfoWindow.js`为InfoWindow组件,可以用来显示弹出框
-9. 其他组件,有待添加.
+9. `LayerTraffic.js`为LayerTraffic组件,可以用来显示交通层
+10. 其他组件,有待添加.
 
 ## 注意事项
-1. `loadScript.js`是用来加载js和css的,希望能确保加载文件的唯一性,可以参考requirejs的实现机制改掉.
+1. `loadScript.js`是用来加载js和css的,希望能确保加载文件的唯一性,可以参考requirejs的实现机制改掉.注意:这里已经用react-amap的加载方式替换了.
 2. 与`react-amap`的不同之处,加载高德地图js与`Map`,`Marker`等组件是分离的.
 
 ## 已知问题

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-amap-next",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "这是高德地图的react版本,相比react-amap更加简单,更加贴合react用户",
   "keywords": [
     "react",

src/App.js

@@ -17,6 +17,76 @@ class MarkerTest extends Component {
     super();
     this.state = {};
     this._setMapRefer = this._setMapRefer.bind(this);
+    this._setMarkerRefer = this._setMarkerRefer.bind(this);
+  }
+
+  componentDidMount() {
+    loadMap('0325e3d6d69cd56de4980b4f28906fd8').then(AMap => {
+      this.setState({ AMap });
+    });
+  }
+  _setMapRefer (refer) {
+    this.mapRefer = refer;
+    window.$map = this.mapRefer;
+    console.log('_setMapRefer:', this.mapRefer, this.markerRefer);
+  }
+  _setMarkerRefer (refer) {
+    this.markerRefer = refer;
+    window.$marker = this.markerRefer;
+    console.log('_setMarkerRefer:', this.mapRefer, this.markerRefer);
+  }
+
+  render() {
+    let center = [116.39, 39.9];
+    window.$map = this.mapRefer;
+    window.$marker = this.markerRefer;
+    console.log('render:', this.mapRefer, this.markerRefer);
+    let markerIcon = 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png';
+    switch (this.state.markerIndex) {
+      case 1: markerIcon = 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'; break;
+      case 2: markerIcon = 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'; break;
+      default:
+      case 0: markerIcon = 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'; break;
+    }
+    return (
+      <div>
+      <div>
+        <div style={{margin:2}}>
+          <span style={{marginRight:2}}>改Marker图标:</span>
+          <span onClick={() => this.setState({ markerIndex:0 })}>
+            Marker-0
+          </span>
+          <span onClick={() => this.setState({ markerIndex:1 })}>
+            Marker-1
+          </span>
+        </div>
+        <Map
+          refer={this._setMapRefer}
+          style={{ width: 1200, height: 800 }}
+          options={{ center, zoom:13 }}
+        >
+          <LayerTraffic options={{ interval:20,opacity:0.8 }} />
+          <Marker
+            refer={this._setMarkerRefer}
+            options={{
+              icon: markerIcon,
+              position: center
+            }}
+          />
+        </Map>
+      </div>
+      </div>
+    );
+  }
+
+}
+
+
+class MarkerCarMoveTest extends Component {
+  constructor() {
+    super();
+    this.state = {};
+    this._setMapRefer = this._setMapRefer.bind(this);
     this._mapDblclick = this._mapDblclick.bind(this);
     this._carMoving = this._carMoving.bind(this);
     this._logging = this._logging.bind(this);
@@ -209,7 +279,6 @@ class MarkerTest extends Component {
 
 }
 
-
 class MassMarkTest extends Component {
   constructor() {
     super();
@@ -510,6 +579,7 @@ class App extends Component {
       <div>
         <div>
           <span style={{padding:5, margin: 5, backgroundColor:(this.state.test === 'marker')?'#ff0':'#fff'}} onClick={()=>this.setState({test: 'marker'})}> MarkerTest </span>
+          <span style={{padding:5, margin: 5, backgroundColor:(this.state.test === 'markercarmove')?'#ff0':'#fff'}} onClick={()=>this.setState({test: 'markercarmove'})}> 移动的汽车(MarkerCarMoveTest) </span>
           <span style={{padding:5, margin: 5, backgroundColor:(this.state.test === 'massmarks')?'#ff0':'#fff'}} onClick={()=>this.setState({test: 'massmarks'})}> MassMarksTest </span>
           <span style={{padding:5, margin: 5, backgroundColor:(this.state.test === 'polygon')?'#ff0':'#fff'}} onClick={()=>this.setState({test: 'polygon'})}> PolygonTest </span>
           <span style={{padding:5, margin: 5, backgroundColor:(this.state.test === 'infowindow')?'#ff0':'#fff'}} onClick={()=>this.setState({test: 'infowindow'})}> InfoWindowTest </span>
@@ -518,6 +588,9 @@ class App extends Component {
           {this.state.test === 'marker' &&
           <MarkerTest />
           }
+          {this.state.test === 'markercarmove' &&
+          <MarkerCarMoveTest />
+          }
           {this.state.test === 'massmarks' &&
           <MassMarkTest />
           }

src/lib/api.js

@@ -193,6 +193,7 @@ const commonUpdate = (
   if (!isEmpty(props) || !isEmpty(events)) {
     xdebug(
       __func__, 'update:',
+      entity,
       props,
       events,
       // newOptions,
@@ -328,7 +329,7 @@ export const updateMarker = (
     map: v => entity.setMap(v),
     position: v => entity.setPosition(v),
     offset: v => entity.setOffset(v),
-    icon: v => entity.setIcon(v),
+    icon: v => { setTimeout(()=> entity.setIcon(v),0); }, // 这里有一个bug,在某些时候页面更改icon时,界面上并不生效.
     content: v => entity.setContent(v),
     topWhenClick: null,
     bubble: null,