migrate map code to typescript

2026-05-15 23:47:33 +08:00 · 2025-01-05 03:10:41 +08:00
parent a46399cbaf
commit 16fa77eb09
17 changed files with 919 additions and 912 deletions
@@ -0,0 +1,125 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import type { MapProvider, MapInstance, MapInstanceInitOptions, MapPosition } from './base.ts';
+
+import { asyncLoadAssets } from '@/lib/misc.ts';
+import services from '@/lib/services.js';
+
+export class GoogleMapProvider implements MapProvider {
+    public static GoogleMap: unknown = null;
+    public static ControlPosition = {
+        LEFT_TOP: (window.google && window.google.maps && window.google.maps.ControlPosition) ? window.google.maps.ControlPosition.LEFT_TOP : 5
+    };
+
+    public getWebsite(): string {
+        return 'https://maps.google.com';
+    }
+
+    public asyncLoadAssets(language: string): Promise<unknown> {
+        if (GoogleMapProvider.GoogleMap) {
+            return Promise.resolve();
+        }
+
+        if (!window.onGoogleMapCallback) {
+            window.onGoogleMapCallback = () => {
+                if (window.google) {
+                    GoogleMapProvider.GoogleMap = window.google.maps;
+                    GoogleMapProvider.ControlPosition.LEFT_TOP = (window.google && window.google.maps && window.google.maps.ControlPosition) ? window.google.maps.ControlPosition.LEFT_TOP : 5;
+                }
+            };
+        }
+
+        return asyncLoadAssets('js', services.generateGoogleMapJavascriptUrl(language, 'onGoogleMapCallback'));
+    }
+
+    public createMapInstance(): MapInstance | null {
+        return new GoogleMapInstance();
+    }
+}
+
+export class GoogleMapInstance implements MapInstance {
+    public dependencyLoaded: boolean = false;
+    public inited: boolean = false;
+
+    public readonly defaultZoomLevel: number = 14;
+    public readonly minZoomLevel: number = 1;
+
+    private googleMapInstance: unknown = null;
+    private googleMapCenterMarker: unknown | null;
+
+    constructor() {
+        this.dependencyLoaded = !!GoogleMapProvider.GoogleMap;
+    }
+
+    public initMapInstance(mapContainer: HTMLElement, options: MapInstanceInitOptions): void {
+        if (!GoogleMapProvider.GoogleMap) {
+            return;
+        }
+
+        const googleMap = GoogleMapProvider.GoogleMap;
+
+        this.googleMapInstance = new googleMap.Map(mapContainer, {
+            zoom: options.zoomLevel,
+            center: {
+                lat: options.initCenter.latitude,
+                lng: options.initCenter.longitude
+            },
+            maxZoom: 19,
+            zoomControl: true,
+            mapTypeControl: false,
+            scaleControl: false,
+            streetViewControl: false,
+            rotateControl: false,
+            fullscreenControl: false,
+            gestureHandling: 'greedy',
+            zoomControlOptions: {
+                position: GoogleMapProvider.ControlPosition.LEFT_TOP
+            }
+        });
+        this.inited = true;
+    }
+
+    public setMapCenterTo(center: MapPosition, zoomLevel: number): void {
+        if (!GoogleMapProvider.GoogleMap || !this.googleMapInstance) {
+            return;
+        }
+
+        this.googleMapInstance.setCenter({
+            lat: center.latitude,
+            lng: center.longitude
+        });
+        this.googleMapInstance.setZoom(zoomLevel);
+    }
+
+    public setMapCenterMarker(position: MapPosition): void {
+        if (!GoogleMapProvider.GoogleMap || !this.googleMapInstance) {
+            return;
+        }
+
+        const googleMap = GoogleMapProvider.GoogleMap;
+
+        if (!this.googleMapCenterMarker) {
+            this.googleMapCenterMarker = new googleMap.Marker({
+                position: {
+                    lat: position.latitude,
+                    lng: position.longitude
+                },
+                map: this.googleMapInstance
+            });
+        } else {
+            this.googleMapCenterMarker.setPosition({
+                lat: position.latitude,
+                lng: position.longitude
+            });
+        }
+    }
+
+    public removeMapCenterMarker(): void {
+        if (!this.googleMapInstance || !this.googleMapCenterMarker) {
+            return;
+        }
+
+        this.googleMapCenterMarker.setMap(null);
+        this.googleMapCenterMarker = null;
+    }
+}