Fix: error may happens while map reload again via route change

leftstick · Sep 30, 2017 · a059c38 · a059c38
1 parent 2bf0762
commit a059c38
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 23 deletions.
diff --git a/src/components/map.component.ts b/src/components/map.component.ts
@@ -76,7 +76,9 @@ export class MapComponent implements OnInit, OnChanges {
         this._service.setOptions(opts);
     }
 
-    public ngOnDestroy() { }
+    public ngOnDestroy() {
+        console.log('on map destroy');
+    }
 
     private addListener(map: Map) {
         map.addEventListener('click', (e: any) => {

diff --git a/src/components/marker.component.ts b/src/components/marker.component.ts
@@ -25,26 +25,23 @@ export class MarkerComponent implements OnInit, OnDestroy {
 
         this
             ._service
-            .getNativeMap()
-            .then(map => {
-                const marker = this.marker = new (<BMap>window['BMap']).Marker(null, this.options);
-                map.addOverlay(marker);
-                this.addListener(marker, map);
-                return marker;
+            .addOverlay((map: Map) => {
+                return this.marker = new (<BMap>window['BMap']).Marker(this.point, this.options);
             })
-            .then(marker => {
+            .then(({ map }) => {
+                this.addListener(this.marker, map);
+            })
+            .then(() => {
                 //workaround: it's weird that postion is set while constructing phase will make click event not working
-                marker.setPosition(new (<BMap>window['BMap']).Point(this.point.lng, this.point.lat));
+                this.marker.setPosition(new (<BMap>window['BMap']).Point(this.point.lng, this.point.lat));
             });
     }
 
     public ngOnDestroy() {
+
         this
             ._service
-            .getNativeMap()
-            .then(map => {
-                map.removeOverlay(this.marker);
-            });
+            .removeOverlay(this.marker);
     }
 
     private addListener(marker: Marker, map: Map) {

diff --git a/src/providers/mapService.ts b/src/providers/mapService.ts
@@ -4,6 +4,7 @@ import { isNull, isBoolean } from '../helpers/object';
 import { ScriptLoader } from './scriptLoader';
 import { Map, MapOptions } from '../types/Map';
 import { BMap } from '../types/BMap';
+import { Overlay } from '../types/Overlay';
 
 @Injectable()
 export class MapService {
@@ -72,6 +73,21 @@ export class MapService {
         }
     }
 
+    public addOverlay(cb: { (map: Map): Overlay }): Promise<{ map: Map; overlay: Overlay }> {
+        return this._map.then((map: Map) => {
+
+            const overlay = cb(map);
+            map.addOverlay(overlay);
+            return { map, overlay };
+        });
+    }
+
+    public removeOverlay(overlay: Overlay): Promise<void> {
+        return this._map.then((map: Map) => {
+            map.removeOverlay(overlay);
+        })
+    }
+
     public getNativeMap(): Promise<Map> {
         return this._map;
     }

diff --git a/src/providers/scriptLoader.ts b/src/providers/scriptLoader.ts
@@ -1,16 +1,23 @@
 import { Inject, Injectable } from '@angular/core';
 import { nullCheck } from '../helpers/validate';
 
-type LOADING_STATE = 'NON' | 'LOADED' | 'LOADING';
+
+enum LOADING_STATE {
+    'NON',
+    'LOADED',
+    'LOADING'
+}
 
 export class ScriptLoaderConfig {
     public ak: String = '';
 }
 
+window['_scriptLoadState'] = LOADING_STATE.NON;
+window['_loadingCallbacks'] = [];
+
 @Injectable()
 export class ScriptLoader {
-    private _scriptLoadState: LOADING_STATE = 'NON';
-    private _loadingCallbacks: Array<Function> = [];
+
     private _config: ScriptLoaderConfig;
 
     constructor( @Inject(ScriptLoaderConfig) config: ScriptLoaderConfig) {
@@ -20,22 +27,24 @@ export class ScriptLoader {
     }
 
     public load(cb: Function): void {
-        if (this._scriptLoadState === 'LOADED') {
+        if (window['_scriptLoadState'] === LOADING_STATE.LOADED) {
+            switchDisplay('baidu-map .baidu-map-instance', 'block');
+            switchDisplay('baidu-map .baidu-map-offline', 'none');
             return cb();
         }
-        if (this._scriptLoadState === 'LOADING') {
-            this._loadingCallbacks.push(cb);
+        if (window['_scriptLoadState'] === LOADING_STATE.LOADING) {
+            window['_loadingCallbacks'].push(cb);
             return;
         }
-        this._scriptLoadState = 'LOADING';
-        this._loadingCallbacks.push(cb);
+        window['_scriptLoadState'] = LOADING_STATE.LOADING;
+        window['_loadingCallbacks'].push(cb);
         const MAP_URL = `//api.map.baidu.com/api?v=2.0&ak=${this._config.ak}&callback=baidumapinit&s=${window.location.protocol === 'https:' ? 1 : 0}`;
 
         window['baidumapinit'] = () => {
-            this._scriptLoadState = 'LOADED';
+            window['_scriptLoadState'] = LOADING_STATE.LOADED;
             switchDisplay('baidu-map .baidu-map-instance', 'block');
             switchDisplay('baidu-map .baidu-map-offline', 'none');
-            this._loadingCallbacks.forEach(c => {
+            window['_loadingCallbacks'].forEach((c: Function) => {
                 c();
             });
         };