expo-gaode-map 0.1.0

package/ios/ExpoGaodeMapModule.swift

@@ -0,0 +1,48 @@
+import ExpoModulesCore
+
+public class ExpoGaodeMapModule: Module {
+  // Each module class must implement the definition function. The definition consists of components
+  // that describes the module's functionality and behavior.
+  // See https://docs.expo.dev/modules/module-api for more details about available components.
+  public func definition() -> ModuleDefinition {
+    // Sets the name of the module that JavaScript code will use to refer to the module. Takes a string as an argument.
+    // Can be inferred from module's class name, but it's recommended to set it explicitly for clarity.
+    // The module will be accessible from `requireNativeModule('ExpoGaodeMap')` in JavaScript.
+    Name("ExpoGaodeMap")
+
+    // Defines constant property on the module.
+    Constant("PI") {
+      Double.pi
+    }
+
+    // Defines event names that the module can send to JavaScript.
+    Events("onChange")
+
+    // Defines a JavaScript synchronous function that runs the native code on the JavaScript thread.
+    Function("hello") {
+      return "Hello world! 👋"
+    }
+
+    // Defines a JavaScript function that always returns a Promise and whose native code
+    // is by default dispatched on the different thread than the JavaScript runtime runs on.
+    AsyncFunction("setValueAsync") { (value: String) in
+      // Send an event to JavaScript.
+      self.sendEvent("onChange", [
+        "value": value
+      ])
+    }
+
+    // Enables the module to be used as a native view. Definition components that are accepted as part of the
+    // view definition: Prop, Events.
+    View(ExpoGaodeMapView.self) {
+      // Defines a setter for the `url` prop.
+      Prop("url") { (view: ExpoGaodeMapView, url: URL) in
+        if view.webView.url != url {
+          view.webView.load(URLRequest(url: url))
+        }
+      }
+
+      Events("onLoad")
+    }
+  }
+}

package/ios/ExpoGaodeMapView.swift

@@ -0,0 +1,38 @@
+import ExpoModulesCore
+import WebKit
+
+// This view will be used as a native component. Make sure to inherit from `ExpoView`
+// to apply the proper styling (e.g. border radius and shadows).
+class ExpoGaodeMapView: ExpoView {
+  let webView = WKWebView()
+  let onLoad = EventDispatcher()
+  var delegate: WebViewDelegate?
+
+  required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    clipsToBounds = true
+    delegate = WebViewDelegate { url in
+      self.onLoad(["url": url])
+    }
+    webView.navigationDelegate = delegate
+    addSubview(webView)
+  }
+
+  override func layoutSubviews() {
+    webView.frame = bounds
+  }
+}
+
+class WebViewDelegate: NSObject, WKNavigationDelegate {
+  let onUrlChange: (String) -> Void
+
+  init(onUrlChange: @escaping (String) -> Void) {
+    self.onUrlChange = onUrlChange
+  }
+
+  func webView(_ webView: WKWebView, didFinish navigation: WKNavigation) {
+    if let url = webView.url {
+      onUrlChange(url.absoluteString)
+    }
+  }
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "expo-gaode-map",
+  "version": "0.1.0",
+  "description": "高德地图 react-native 安卓和 ios",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "scripts": {
+    "build": "expo-module build",
+    "clean": "expo-module clean",
+    "lint": "expo-module lint",
+    "test": "expo-module test",
+    "prepare": "expo-module prepare",
+    "prepublishOnly": "expo-module prepublishOnly",
+    "expo-module": "expo-module",
+    "open:ios": "xed example/ios",
+    "open:android": "open -a \"Android Studio\" example/android"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "expo-gaode-map",
+    "ExpoGaodeMap"
+  ],
+  "repository": "https://github.com/TomWq/expo-gaode-map",
+  "bugs": {
+    "url": "https://github.com/TomWq/expo-gaode-map/issues"
+  },
+  "author": "尚博信_王强 <wangqiang03@sunboxsoft.com> (https://github.com/TomWq)",
+  "license": "MIT",
+  "homepage": "https://github.com/TomWq/expo-gaode-map#readme",
+  "dependencies": {
+    "supercluster": "^8.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "expo": "^54.0.18",
+    "expo-module-scripts": "^5.0.7",
+    "react-native": "0.81.5"
+  },
+  "peerDependencies": {
+    "expo": "*",
+    "react": "*",
+    "react-native": "*"
+  }
+}

package/src/ExpoGaodeMap.types.ts

@@ -0,0 +1,68 @@
+/*
+ * @Author       : 尚博信_王强 wangqiang03@sunboxsoft.com
+ * @Date         : 2025-11-13 14:03:56
+ * @LastEditors  : 尚博信_王强 wangqiang03@sunboxsoft.com
+ * @LastEditTime : 2025-11-13 14:30:00
+ * @FilePath     : /expo-gaode-map/src/ExpoGaodeMap.types.ts
+ * @Description  : 高德地图 Expo Module 主类型定义文件
+ * 
+ * Copyright (c) 2025 by 尚博信_王强, All Rights Reserved. 
+ */
+
+// 导出所有类型定义
+export * from './types';
+
+// 重新导出常用类型，方便直接从主模块导入
+export type {
+  // 通用类型
+  LatLng,
+  Point,
+  CameraPosition,
+  LatLngBounds,
+  MapPoi,
+  
+  // 地图视图
+  MapViewProps,
+  CameraEvent,
+  
+  // 定位
+  Coordinates,
+  ReGeocode,
+  LocationOptions,
+  
+  // 覆盖物
+  MarkerProps,
+  PolylineProps,
+  PolygonProps,
+  CircleProps,
+  HeatMapProps,
+  MultiPointProps,
+  ClusterProps,
+} from './types';
+
+export {
+  MapType,
+  LocationMode,
+  LocationAccuracy,
+  CoordinateType,
+} from './types';
+
+/**
+ * Expo 模块事件类型
+ */
+export type ExpoGaodeMapModuleEvents = {
+  /**
+   * 定位更新事件
+   */
+  onLocationUpdate: (location: any) => void;
+  
+  /**
+   * 定位错误事件
+   */
+  onLocationError: (error: { code: number; message: string }) => void;
+};
+
+/**
+ * Expo 地图视图属性（用于主视图组件）
+ */
+export type { MapViewProps as ExpoGaodeMapViewProps } from './types';

package/src/ExpoGaodeMapModule.ts

@@ -0,0 +1,21 @@
+/*
+ * @Author       : 尚博信_王强 wangqiang03@sunboxsoft.com
+ * @Date         : 2025-11-13 14:03:56
+ * @LastEditors  : 尚博信_王强 wangqiang03@sunboxsoft.com
+ * @LastEditTime : 2025-11-13 14:58:00
+ * @FilePath     : /expo-gaode-map/src/ExpoGaodeMapModule.ts
+ * @Description  : 
+ * 
+ * Copyright (c) 2025 by 尚博信_王强, All Rights Reserved. 
+ */
+import { NativeModule, requireNativeModule } from 'expo';
+import type { ExpoGaodeMapModuleEvents } from './ExpoGaodeMap.types';
+
+
+declare class ExpoGaodeMapModule extends NativeModule<ExpoGaodeMapModuleEvents> {
+  // 地图控制方法已移至 MapView 的 ref 调用
+  // 使用方式: mapRef.current.moveCamera() 等
+}
+
+// This call loads the native module object from the JSI.
+export default requireNativeModule<ExpoGaodeMapModule>('ExpoGaodeMap');

package/src/ExpoGaodeMapView.tsx

@@ -0,0 +1,151 @@
+/*
+ * @Author       : 尚博信_王强 wangqiang03@sunboxsoft.com
+ * @Date         : 2025-11-13 14:03:56
+ * @LastEditors  : 尚博信_王强 wangqiang03@sunboxsoft.com
+ * @LastEditTime : 2025-11-13 19:35:20
+ * @FilePath     : /expo-gaode-map/src/ExpoGaodeMapView.tsx
+ * @Description  : 高德地图视图组件
+ * 
+ * Copyright (c) 2025 by 尚博信_王强, All Rights Reserved. 
+ */
+
+import { requireNativeViewManager } from 'expo-modules-core';
+import * as React from 'react';
+
+import type { 
+  MapViewProps, 
+  MapViewRef,
+  NativeMapViewRef,
+  CameraPosition, 
+  LatLng, 
+  Point, 
+  CircleProps,
+  MarkerProps,
+  PolylineProps,
+  PolygonProps,
+} from './types';
+
+// 重新导出 MapViewRef 供外部使用
+export type { MapViewRef } from './types';
+
+const NativeView: React.ComponentType<MapViewProps & { ref?: React.Ref<NativeMapViewRef> }> = requireNativeViewManager('ExpoGaodeMap');
+
+// 创建 Context 用于子组件访问 MapRef
+export const MapContext = React.createContext<React.RefObject<MapViewRef | null> | null>(null);
+
+/**
+ * 高德地图视图组件
+ * 
+ * @example
+ * ```tsx
+ * import { MapView } from 'expo-gaode-map';
+ * 
+ * function MyMap() {
+ *   const mapRef = React.useRef(null);
+ *   
+ *   return (
+ *     <MapView
+ *       ref={mapRef}
+ *       style={{ flex: 1 }}
+ *       initialCameraPosition={{
+ *         target: { latitude: 39.9, longitude: 116.4 },
+ *         zoom: 10,
+ *       }}
+ *       onLoad={() => console.log('地图加载完成')}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+const ExpoGaodeMapView = React.forwardRef<MapViewRef, MapViewProps>((props, ref) => {
+  const nativeRef = React.useRef<NativeMapViewRef>(null);
+  const internalRef = React.useRef<MapViewRef | null>(null);
+
+  const apiRef: MapViewRef = React.useMemo(() => ({
+    moveCamera: async (position: CameraPosition, duration: number = 0) => {
+      if (!nativeRef.current) throw new Error('MapView not initialized');
+      return nativeRef.current.moveCamera(position, duration);
+    },
+    getLatLng: async (point: Point) => {
+      if (!nativeRef.current) throw new Error('MapView not initialized');
+      return nativeRef.current.getLatLng(point);
+    },
+    setCenter: async (center: LatLng, animated: boolean = false) => {
+      if (!nativeRef.current) throw new Error('MapView not initialized');
+      return nativeRef.current.setCenter(center, animated);
+    },
+    setZoom: async (zoom: number, animated: boolean = false) => {
+      if (!nativeRef.current) throw new Error('MapView not initialized');
+      return nativeRef.current.setZoom(zoom, animated);
+    },
+    getCameraPosition: async () => {
+      if (!nativeRef.current) throw new Error('MapView not initialized');
+      return nativeRef.current.getCameraPosition();
+    },
+    addCircle: async (id: string, props: CircleProps) => {
+      if (!nativeRef.current) throw new Error('MapView not initialized');
+      return nativeRef.current.addCircle(id, props);
+    },
+    removeCircle: async (id: string) => {
+      if (!nativeRef.current) throw new Error('MapView not initialized');
+      return nativeRef.current.removeCircle(id);
+    },
+    updateCircle: async (id: string, props: Partial<CircleProps>) => {
+      if (!nativeRef.current) throw new Error('MapView not initialized');
+      return nativeRef.current.updateCircle(id, props);
+    },
+    addMarker: async (id: string, props: MarkerProps) => {
+      if (!nativeRef.current) throw new Error('MapView not initialized');
+      return nativeRef.current.addMarker(id, props);
+    },
+    removeMarker: async (id: string) => {
+      if (!nativeRef.current) throw new Error('MapView not initialized');
+      return nativeRef.current.removeMarker(id);
+    },
+    updateMarker: async (id: string, props: Partial<MarkerProps>) => {
+      if (!nativeRef.current) throw new Error('MapView not initialized');
+      return nativeRef.current.updateMarker(id, props);
+    },
+    addPolyline: async (id: string, props: PolylineProps) => {
+      if (!nativeRef.current) throw new Error('MapView not initialized');
+      return nativeRef.current.addPolyline(id, props);
+    },
+    removePolyline: async (id: string) => {
+      if (!nativeRef.current) throw new Error('MapView not initialized');
+      return nativeRef.current.removePolyline(id);
+    },
+    updatePolyline: async (id: string, props: Partial<PolylineProps>) => {
+      if (!nativeRef.current) throw new Error('MapView not initialized');
+      return nativeRef.current.updatePolyline(id, props);
+    },
+    addPolygon: async (id: string, props: PolygonProps) => {
+      if (!nativeRef.current) throw new Error('MapView not initialized');
+      return nativeRef.current.addPolygon(id, props);
+    },
+    removePolygon: async (id: string) => {
+      if (!nativeRef.current) throw new Error('MapView not initialized');
+      return nativeRef.current.removePolygon(id);
+    },
+    updatePolygon: async (id: string, props: Partial<PolygonProps>) => {
+      if (!nativeRef.current) throw new Error('MapView not initialized');
+      return nativeRef.current.updatePolygon(id, props);
+    },
+  }), []);
+
+  // 设置 internalRef 和外部 ref
+  React.useEffect(() => {
+    internalRef.current = apiRef;
+  }, [apiRef]);
+
+  React.useImperativeHandle(ref, () => apiRef, [apiRef]);
+
+  return (
+    <MapContext.Provider value={internalRef}>
+      <NativeView ref={nativeRef} {...props} />
+    </MapContext.Provider>
+  );
+});
+
+ExpoGaodeMapView.displayName = 'ExpoGaodeMapView';
+
+export default ExpoGaodeMapView;

package/src/components/overlays/Circle.tsx

@@ -0,0 +1,73 @@
+/*
+ * @Author       : 尚博信_王强 wangqiang03@sunboxsoft.com
+ * @Date         : 2025-11-13 15:02:00
+ * @LastEditors  : 尚博信_王强 wangqiang03@sunboxsoft.com
+ * @LastEditTime : 2025-11-13 18:43:00
+ * @FilePath     : /expo-gaode-map/src/components/overlays/Circle.tsx
+ * @Description  : 地图圆形组件 - 使用命令式 API
+ * 
+ * Copyright (c) 2025 by 尚博信_王强, All Rights Reserved. 
+ */
+
+import * as React from 'react';
+import type { CircleProps } from '../../types';
+import { MapContext } from '../../ExpoGaodeMapView';
+
+/**
+ * 地图圆形组件
+ * 
+ * @example
+ * ```tsx
+ * <MapView>
+ *   <Circle
+ *     center={{ latitude: 39.9, longitude: 116.4 }}
+ *     radius={1000}
+ *     fillColor={0x440000FF}
+ *     strokeColor={0xFFFF0000}
+ *   />
+ * </MapView>
+ * ```
+ */
+export default function Circle(props: CircleProps) {
+  const mapRef = React.useContext(MapContext);
+  const circleIdRef = React.useRef<string | null>(null);
+  
+  console.log('Circle 组件渲染，props:', JSON.stringify(props));
+  
+  React.useEffect(() => {
+    console.log('Circle useEffect - 添加圆形到地图');
+    
+    if (!mapRef?.current) {
+      console.warn('MapRef 不可用');
+      return;
+    }
+    
+    // 添加圆形
+    const circleId = `circle_${Date.now()}_${Math.random()}`;
+    circleIdRef.current = circleId;
+    
+    mapRef.current.addCircle(circleId, props);
+    console.log('✅ 圆形已添加:', circleId);
+    
+    // 清理函数 - 移除圆形
+    return () => {
+      console.log('Circle useEffect cleanup - 移除圆形');
+      if (circleIdRef.current && mapRef?.current) {
+        mapRef.current.removeCircle(circleIdRef.current);
+        console.log('✅ 圆形已移除:', circleIdRef.current);
+      }
+    };
+  }, []);
+  
+  // 当 props 变化时更新圆形
+  React.useEffect(() => {
+    console.log('Circle props 变化，更新圆形');
+    if (circleIdRef.current && mapRef?.current) {
+      mapRef.current.updateCircle(circleIdRef.current, props);
+      console.log('✅ 圆形已更新:', circleIdRef.current);
+    }
+  }, [props.center, props.radius, props.fillColor, props.strokeColor, props.strokeWidth]);
+  
+  // 不渲染任何 UI
+  return null;
+}

package/src/components/overlays/Cluster.tsx

@@ -0,0 +1,38 @@
+/*
+ * @Author       : 尚博信_王强 wangqiang03@sunboxsoft.com
+ * @Date         : 2025-11-13 15:02:50
+ * @LastEditors  : 尚博信_王强 wangqiang03@sunboxsoft.com
+ * @LastEditTime : 2025-11-13 18:19:20
+ * @FilePath     : /expo-gaode-map/src/components/overlays/Cluster.tsx
+ * @Description  : 地图点聚合组件
+ * 
+ * Copyright (c) 2025 by 尚博信_王强, All Rights Reserved. 
+ */
+
+import { requireNativeViewManager } from 'expo-modules-core';
+import * as React from 'react';
+import type { ClusterProps } from '../../types';
+
+const NativeCluster = requireNativeViewManager('ExpoGaodeMap_ClusterView');
+
+/**
+ * 地图点聚合组件
+ * 将相近的标记点聚合显示，提高大量标记的展示性能
+ * 
+ * @example
+ * ```tsx
+ * <MapView>
+ *   <Cluster
+ *     points={[
+ *       { latitude: 39.9, longitude: 116.4, id: '1' },
+ *       { latitude: 39.91, longitude: 116.41, id: '2' },
+ *     ]}
+ *     radius={60}
+ *     minClusterSize={2}
+ *   />
+ * </MapView>
+ * ```
+ */
+export default function Cluster(props: ClusterProps) {
+  return <NativeCluster {...props} />;
+}

package/src/components/overlays/HeatMap.tsx

@@ -0,0 +1,37 @@
+/*
+ * @Author       : 尚博信_王强 wangqiang03@sunboxsoft.com
+ * @Date         : 2025-11-13 15:02:15
+ * @LastEditors  : 尚博信_王强 wangqiang03@sunboxsoft.com
+ * @LastEditTime : 2025-11-13 18:12:07
+ * @FilePath     : /expo-gaode-map/src/components/overlays/HeatMap.tsx
+ * @Description  : 地图热力图组件
+ * 
+ * Copyright (c) 2025 by 尚博信_王强, All Rights Reserved. 
+ */
+
+import { requireNativeViewManager } from 'expo-modules-core';
+import * as React from 'react';
+import type { HeatMapProps } from '../../types';
+
+const NativeHeatMap = requireNativeViewManager('ExpoGaodeMap_HeatMapView');
+
+/**
+ * 地图热力图组件
+ * 
+ * @example
+ * ```tsx
+ * <MapView>
+ *   <HeatMap
+ *     data={[
+ *       { latitude: 39.9, longitude: 116.4, intensity: 100 },
+ *       { latitude: 39.91, longitude: 116.41, intensity: 80 },
+ *     ]}
+ *     radius={50}
+ *     opacity={0.6}
+ *   />
+ * </MapView>
+ * ```
+ */
+export default function HeatMap(props: HeatMapProps) {
+  return <NativeHeatMap {...props} />;
+}

package/src/components/overlays/Marker.tsx

@@ -0,0 +1,66 @@
+/*
+ * @Author       : 尚博信_王强 wangqiang03@sunboxsoft.com
+ * @Date         : 2025-11-13 15:01:10
+ * @LastEditors  : 尚博信_王强 wangqiang03@sunboxsoft.com
+ * @LastEditTime : 2025-11-13 18:55:00
+ * @FilePath     : /expo-gaode-map/src/components/overlays/Marker.tsx
+ * @Description  : 地图标记组件 - 使用命令式 API
+ * 
+ * Copyright (c) 2025 by 尚博信_王强, All Rights Reserved. 
+ */
+
+import * as React from 'react';
+import { MapContext } from '../../ExpoGaodeMapView';
+import type { MarkerProps } from '../../types';
+
+/**
+ * 地图标记组件
+ * 
+ * @example
+ * ```tsx
+ * <MapView>
+ *   <Marker
+ *     position={{ latitude: 39.9, longitude: 116.4 }}
+ *     title="标记点"
+ *     onPress={() => console.log('Marker pressed')}
+ *   />
+ * </MapView>
+ * ```
+ */
+export default function Marker(props: MarkerProps) {
+  const mapRef = React.useContext(MapContext);
+  const markerIdRef = React.useRef<string>(`marker_${Date.now()}_${Math.random()}`);
+
+  console.log('Marker 组件渲染，props:', props);
+
+  // 添加标记
+  React.useEffect(() => {
+    const markerId = markerIdRef.current;
+    
+    console.log('Marker useEffect - 添加标记到地图');
+    mapRef?.current?.addMarker?.(markerId, props).then(() => {
+      console.log('✅ 标记已添加:', markerId);
+    }).catch((error: any) => {
+      console.error('❌ 添加标记失败:', error);
+    });
+
+    return () => {
+      console.log('Marker useEffect cleanup - 移除标记');
+      mapRef?.current?.removeMarker?.(markerId).catch((error: any) => {
+        console.error('❌ 移除标记失败:', error);
+      });
+    };
+  }, []);
+
+  // 监听 Props 变化，更新标记
+  React.useEffect(() => {
+    const markerId = markerIdRef.current;
+    
+    console.log('Marker props 变化，更新标记:', props);
+    mapRef?.current?.updateMarker?.(markerId, props).catch((error: any) => {
+      console.error('❌ 更新标记失败:', error);
+    });
+  }, [props.position, props.title, props.draggable]);
+
+  return null;
+}

package/src/components/overlays/MultiPoint.tsx

@@ -0,0 +1,37 @@
+/*
+ * @Author       : 尚博信_王强 wangqiang03@sunboxsoft.com
+ * @Date         : 2025-11-13 15:02:35
+ * @LastEditors  : 尚博信_王强 wangqiang03@sunboxsoft.com
+ * @LastEditTime : 2025-11-13 18:19:09
+ * @FilePath     : /expo-gaode-map/src/components/overlays/MultiPoint.tsx
+ * @Description  : 地图海量点组件
+ * 
+ * Copyright (c) 2025 by 尚博信_王强, All Rights Reserved. 
+ */
+
+import { requireNativeViewManager } from 'expo-modules-core';
+import * as React from 'react';
+import type { MultiPointProps } from '../../types';
+
+const NativeMultiPoint = requireNativeViewManager('ExpoGaodeMap_MultiPointView');
+
+/**
+ * 地图海量点组件
+ * 用于展示大量标记点，性能优于普通 Marker
+ * 
+ * @example
+ * ```tsx
+ * <MapView>
+ *   <MultiPoint
+ *     points={[
+ *       { latitude: 39.9, longitude: 116.4, id: '1' },
+ *       { latitude: 39.91, longitude: 116.41, id: '2' },
+ *     ]}
+ *     icon={require('./marker.png')}
+ *   />
+ * </MapView>
+ * ```
+ */
+export default function MultiPoint(props: MultiPointProps) {
+  return <NativeMultiPoint {...props} />;
+}