Ver Fonte

fix to stopMove() when Marker is moving.
replace loadScript.js with APILoader.js

windsome.feng há 7 anos atrás
pai
commit
b30044d245
5 ficheiros alterados com 139 adições e 31 exclusões
  1. 0 1
      lib
  2. 1 1
      package.json
  3. 95 0
      src/lib/APILoader.js
  4. 1 0
      src/lib/Marker.js
  5. 42 29
      src/lib/api.js

+ 0 - 1
lib

@@ -1 +0,0 @@
-src/lib/

+ 1 - 1
package.json

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

+ 95 - 0
src/lib/APILoader.js

@@ -0,0 +1,95 @@
+const DEFAULT_CONFIG = {
+  v: '1.4.0',
+  hostAndPath: 'webapi.amap.com/maps',
+  key: 'f97efc35164149d0c0f299e7a8adb3d2',
+  callback: '__amap_init_callback',
+  useAMapUI: false
+}
+
+let mainPromise = null
+let amapuiPromise = null
+let amapuiInited = false
+export default class APILoader {
+  constructor({ key, useAMapUI, version, protocol }) {
+    this.config = { ...DEFAULT_CONFIG, useAMapUI, protocol }
+    if (typeof window !== 'undefined') {
+      if (key) {
+        this.config.key = key
+      } else if ('amapkey' in window) {
+        this.config.key = window.amapkey
+      }
+    }
+    if (version) {
+      this.config.v = version
+    }
+    this.protocol = protocol || window.location.protocol
+    if (this.protocol.indexOf(':') === -1) {
+      this.protocol += ':'
+    }
+  }
+
+  getScriptSrc(cfg) {
+    return `${this.protocol}//${cfg.hostAndPath}?v=${cfg.v}&key=${cfg.key}&callback=${cfg.callback}`
+  }
+
+  buildScriptTag(src) {
+    const script = document.createElement('script')
+    script.type = 'text/javascript'
+    script.async = true
+    script.defer = true
+    script.src = src
+    return script
+  }
+
+  getAmapuiPromise() {
+    const script = this.buildScriptTag(`${this.protocol}//webapi.amap.com/ui/1.0/main-async.js`)
+    const p = new Promise(resolve => {
+      script.onload = () => {
+        resolve()
+      }
+    })
+    document.body.appendChild(script)
+    return p
+  }
+
+  getMainPromise() {
+    const script = this.buildScriptTag(this.getScriptSrc(this.config))
+    const p = new Promise(resolve => {
+      window[this.config.callback] = () => {
+        resolve()
+        delete window[this.config.callback]
+      }
+    })
+    document.body.appendChild(script)
+    return p
+  }
+
+  load() {
+    if (typeof window === 'undefined') {
+      return null
+    }
+    const { useAMapUI } = this.config
+    mainPromise = mainPromise || this.getMainPromise()
+    if (useAMapUI) {
+      amapuiPromise = amapuiPromise || this.getAmapuiPromise()
+    }
+    return new Promise(resolve => {
+      mainPromise.then(() => {
+        if (useAMapUI && amapuiPromise) {
+          amapuiPromise.then(() => {
+            if (window.initAMapUI && !amapuiInited) {
+              window.initAMapUI()
+              if (typeof useAMapUI === 'function') {
+                useAMapUI()
+              }
+              amapuiInited = true
+            }
+            resolve()
+          })
+        } else {
+          resolve()
+        }
+      })
+    })
+  }
+}

+ 1 - 0
src/lib/Marker.js

@@ -76,6 +76,7 @@ export class Marker extends Component {
     debug(__com__, 'componentWillUnmount', this.props.children, this._entity);
     if (this._entity) {
       //   this._entity.clearMap();
+      this._entity.stopMove();
       this._entity.setMap(null);
       delete this._entity;
       //   delete this._entity;

+ 42 - 29
src/lib/api.js

@@ -1,24 +1,17 @@
 import forOwn from 'lodash/forOwn';
 import isEqual from 'lodash/isEqual';
 import isNil from 'lodash/isNil';
-import loadjscssfile from './loadScript';
+//import loadjscssfile from './loadScript';
+import APILoader from './APILoader'
 
-export const loadApi = async (key = '0325e3d6d69cd56de4980b4f28906fd8') => {
-  return await loadjscssfile(
-    'https://webapi.amap.com/maps?v=1.4.7&key=' + key,
-    'js'
-  );
+export const loadApi = (key = '0325e3d6d69cd56de4980b4f28906fd8') => {
+  return new APILoader({
+    key,
+    useAMapUI: false,
+    version: '1.4.7',
+    protocol: 'https'
+  }).load();
 };
-
-// let LoadResult = false;
-// loadApi().then(result => {
-//   console.log('loadApi result:', result);
-//   LoadResult = result;
-//   return result;
-// })
-
-// export default LoadResult;
-
 export const loadMap = key => {
   return new Promise((resolve, reject) => {
     if (window.AMap) {
@@ -38,6 +31,33 @@ export const loadMap = key => {
   });
 };
 
+
+// export const loadApiV1 = async (key = '0325e3d6d69cd56de4980b4f28906fd8') => {
+//   return await loadjscssfile(
+//     'https://webapi.amap.com/maps?v=1.4.7&key=' + key,
+//     'js'
+//   );
+// };
+
+// export const loadMapV1 = key => {
+//   return new Promise((resolve, reject) => {
+//     if (window.AMap) {
+//       resolve(window.AMap);
+//     }
+//     loadApi(key)
+//       .then(ret => {
+//         if (window.AMap) {
+//           resolve(window.AMap);
+//         } else {
+//           reject(new Error('window.AMap不存在!'));
+//         }
+//       })
+//       .catch(error => {
+//         reject(new Error('加载地图错误!' + error.message));
+//       });
+//   });
+// };
+
 /**
  * [加载插件](https://lbs.amap.com/api/javascript-api/guide/abc/plugins)
  * 加载完成后,可以调用:
@@ -48,20 +68,13 @@ export const loadMap = key => {
 export const loadPlugin = name => {
   return new Promise((resolve, reject) => {
     if (window.AMap) {
-      resolve(true);
-    }
-    loadApi()
-      .then(ret => {
-        if (!name) {
-          reject(new Error('未填写组件名'));
-        }
-        window.AMap.plugin(name, () => {
-          resolve(true);
-        });
-      })
-      .catch(error => {
-        reject(new Error('加载地图错误!' + error.message));
+      window.AMap.plugin(name, () => {
+        resolve(true);
       });
+      //是否有加载失败的情况,如果加载失败,怎么reject?
+    } else {
+      reject(new Error('地图还未加载!'));
+    }
   });
 };