Selaa lähdekoodia

fix undefined in props change.

windsome.feng 7 vuotta sitten
vanhempi
commit
2ad3551d8b
2 muutettua tiedostoa jossa 31 lisäystä ja 9 poistoa
  1. 21 3
      src/App.js
  2. 10 6
      src/api.js

+ 21 - 3
src/App.js

@@ -9,6 +9,7 @@ class App extends Component {
   constructor() {
     super();
     this.state = {};
+    this._mapDblclick = this._mapDblclick.bind(this);
   }
 
   componentDidMount() {
@@ -19,10 +20,14 @@ class App extends Component {
         autoRefresh: true, //是否自动刷新,默认为false
         interval: 5 //刷新间隔,默认180s
       });
-      this.setState({ AMap, layers: [satellite, roadNet, traffic] });
+      this.setState({ AMap, layers: [roadNet, traffic] });
     });
   }
 
+  _mapDblclick() {
+    this.setState({msg:'双击了Map!'});
+  }
+
   render() {
     return (
       <div>
@@ -52,11 +57,18 @@ class App extends Component {
             北京-2
           </span>
         </div>
+        <div style={{margin:2}}>
+          {'消息:'+this.state.msg}
+        </div>
         <Map
           AMap={this.state.AMap}
-          options={{ center: this.state.center, layers: this.state.layers }}
           style={{ width: 700, height: 800 }}
-        >
+          options={{ center: this.state.center, layers: this.state.layers }}
+          events={{
+            click:e=>this.setState({msg: '点击了Map'}),
+            dblclick: this._mapDblclick,
+          }}
+      >
           {this.state.showMarker &&
           <Marker
             AMap={this.state.AMap}
@@ -64,6 +76,9 @@ class App extends Component {
               icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
               position: this.state.position || [116.405467, 39.907761]
             }}
+            events={{
+              click:e=>this.setState({msg: '点击了Marker1'}),
+            }}
           >
           </Marker>
           }
@@ -74,6 +89,9 @@ class App extends Component {
               position: [116.406467, 39.908761],
               content:'<div class="marker-route marker-marker-bus-from"></div>'
             }}
+            events={{
+              click:e=>this.setState({msg: '点击了Marker2'})
+            }}
           >
           </Marker>
         </Map>

+ 10 - 6
src/api.js

@@ -1,5 +1,6 @@
 import forOwn from 'lodash/forOwn';
 import isEqual from 'lodash/isEqual';
+import isNil from 'lodash/isNil';
 import loadjscssfile from './loadScript';
 
 export const loadApi = async (key = '0325e3d6d69cd56de4980b4f28906fd8') => {
@@ -78,6 +79,7 @@ export const createMap = (AMap, dom, options, events) => {
   }
   let map = new AMap.Map(dom, { ...(options || {}) });
   forOwn(events, (value, key) => {
+    console.log('createMap event on ' + key);
     map.on(key, value);
   });
   console.log('createMap ok!');
@@ -104,15 +106,15 @@ export const updateMap = (
         // 找到改变的旧属性,用新属性取代
         let newValue = newOptions && newOptions[key];
         if (!isEqual(newValue, value)) {
-          //if (newValue != value) {
-          props[key] = newValue;
+          if (!(isNil(newValue) && isNil(value)))
+            props[key] = newValue;
         }
       });
     newOptions &&
       forOwn(newOptions, (value, key) => {
         // 找到新加的属性,添加进去
         let oldValue = oldOptions && oldOptions[key];
-        if (oldValue == null) {
+        if (isNil(oldValue) && !isNil(value)) {
           props[key] = value;
         }
       });
@@ -125,15 +127,15 @@ export const updateMap = (
         // 找到改变的旧属性,用新属性取代
         let newValue = newEvents && newEvents[key];
         if (!isEqual(newValue, value)) {
-          //if (newValue != value) {
-          events[key] = newValue;
+          if (!(isNil(newValue) && isNil(value)))
+            events[key] = newValue;
         }
       });
     newEvents &&
       forOwn(newEvents, (value, key) => {
         // 找到新加的属性,添加进去
         let oldValue = oldEvents && oldEvents[key];
-        if (oldValue == null) {
+        if (isNil(oldValue) && !isNil(value)) {
           events[key] = value;
         }
       });
@@ -193,9 +195,11 @@ export const updateMap = (
   forOwn(events, (value, key) => {
     let oldFunc = oldEvents && oldEvents[key];
     if (oldFunc) {
+      console.log('updateMap: event off ' + key);
       map.off(key, oldFunc);
     }
     if (value) {
+      console.log('updateMap: event on ' + key);
       map.on(key, value);
     }
   });