expo-gaode-map 1.1.8 → 2.0.0-alpha.2

package/src/components/overlays/Marker.tsx

@@ -1,162 +1,87 @@
+
 import * as React from 'react';
-import { Image } from 'react-native';
 import { requireNativeViewManager } from 'expo-modules-core';
-import { MapContext, MarkerEventContext } from '../../ExpoGaodeMapView';
 import type { MarkerProps } from '../../types';
 
 const NativeMarkerView = requireNativeViewManager('MarkerView');
 
-export default function Marker(props: MarkerProps) {
-  // 如果有 children，使用声明式 API
-  if (props.children) {
-    return <MarkerDeclarative {...props} />;
-  }
-  // 否则使用命令式 API
-  return <MarkerImperative {...props} />;
-}
-
-function MarkerDeclarative(props: MarkerProps) {
-  const eventManager = React.useContext(MarkerEventContext);
-  const markerIdRef = React.useRef(`marker_${Date.now()}_${Math.random()}`);
-  
+/**
+ * Marker 组件 - 完全声明式 API
+ *
+ * 支持：
+ * - 自定义图标（icon）
+ * - 自定义内容（children）
+ * - 大头针样式（pinColor）
+ * - 拖拽功能
+ * - 所有事件回调
+ */
+function Marker(props: MarkerProps) {
   // 根据是否有 children 来决定使用哪个尺寸属性
-  // 有 children：使用 customViewWidth/customViewHeight（默认 80x30）
-  // 无 children：使用 iconWidth/iconHeight（用于自定义图标）
+  // 有 children：使用 customViewWidth/customViewHeight（默认 200x40）
+  // 无 children：使用 iconWidth/iconHeight（用于自定义图标，默认 40x40）
   const containerWidth = props.children
-    ? (props.customViewWidth && props.customViewWidth > 0 ? props.customViewWidth : 80)
-    : (props.iconWidth || 0);
+    ? (props.customViewWidth && props.customViewWidth > 0 ? props.customViewWidth : 200)
+    : (props.iconWidth && props.iconWidth > 0 ? props.iconWidth : 40);
   const containerHeight = props.children
-    ? (props.customViewHeight && props.customViewHeight > 0 ? props.customViewHeight : 30)
-    : (props.iconHeight || 0);
+    ? (props.customViewHeight && props.customViewHeight > 0 ? props.customViewHeight : 40)
+    : (props.iconHeight && props.iconHeight > 0 ? props.iconHeight : 40);
   
-  React.useEffect(() => {
-    if (eventManager) {
-      eventManager.register(markerIdRef.current, {
-        onPress: props.onPress,
-        onDragStart: props.onDragStart,
-        onDrag: props.onDrag,
-        onDragEnd: props.onDragEnd,
-      });
-    }
-    return () => {
-      if (eventManager) {
-        eventManager.unregister(markerIdRef.current);
-      }
-    };
-  }, [eventManager, props.onPress, props.onDragStart, props.onDrag, props.onDragEnd]);
+  // 从 props 中排除 position 属性，避免传递到原生层
+  const { position, ...restProps } = props;
   
   return (
     <NativeMarkerView
-      latitude={props.position.latitude}
-      longitude={props.position.longitude}
-      title={props.title}
-      snippet={props.snippet}
-      draggable={props.draggable}
-      icon={props.icon}
-      iconWidth={props.iconWidth || 0}  // 传递原始的 iconWidth（用于自定义图标）
-      iconHeight={props.iconHeight || 0} // 传递原始的 iconHeight（用于自定义图标）
-      customViewWidth={containerWidth}  // 新增：自定义视图宽度
-      customViewHeight={containerHeight} // 新增：自定义视图高度
-      pinColor={props.pinColor}
-      animatesDrop={props.animatesDrop}
-      centerOffset={props.centerOffset}
-      opacity={props.opacity}
-      flat={props.flat}
-      zIndex={props.zIndex}
-      anchor={props.anchor}
-      style={{ width: containerWidth, height: containerHeight }}
+      latitude={position.latitude}
+      longitude={position.longitude}
+      iconWidth={containerWidth}
+      iconHeight={containerHeight}
+      customViewWidth={containerWidth}
+      customViewHeight={containerHeight}
+      {...restProps}
     >
       {props.children}
     </NativeMarkerView>
   );
 }
 
-function MarkerImperative(props: MarkerProps) {
-  const mapRef = React.useContext(MapContext);
-  const eventManager = React.useContext(MarkerEventContext);
-  const markerIdRef = React.useRef<string | null>(null);
-  const propsRef = React.useRef(props);
+/**
+ * 自定义比较函数
+ * 深度比较 position 和其他关键属性
+ */
+function arePropsEqual(prevProps: MarkerProps, nextProps: MarkerProps): boolean {
+  // 比较 position
+  if (
+    prevProps.position.latitude !== nextProps.position.latitude ||
+    prevProps.position.longitude !== nextProps.position.longitude
+  ) {
+    return false;
+  }
   
-  React.useEffect(() => {
-    propsRef.current = props;
-  }, [props]);
+  // 比较基础属性
+  if (
+    prevProps.title !== nextProps.title ||
+    prevProps.snippet !== nextProps.snippet ||
+    prevProps.icon !== nextProps.icon ||
+    prevProps.pinColor !== nextProps.pinColor ||
+    prevProps.draggable !== nextProps.draggable ||
+    prevProps.animatesDrop !== nextProps.animatesDrop ||
+    prevProps.iconWidth !== nextProps.iconWidth ||
+    prevProps.iconHeight !== nextProps.iconHeight ||
+    prevProps.customViewWidth !== nextProps.customViewWidth ||
+    prevProps.customViewHeight !== nextProps.customViewHeight
+  ) {
+    return false;
+  }
   
-  React.useEffect(() => {
-    const checkAndAdd = () => {
-      if (!mapRef?.current) {
-        setTimeout(checkAndAdd, 50);
-        return;
-      }
-      
-      const markerId = `marker_${Date.now()}_${Math.random()}`;
-      markerIdRef.current = markerId;
-      
-      if (eventManager) {
-        eventManager.register(markerId, {
-          onPress: props.onPress,
-          onDragStart: props.onDragStart,
-          onDrag: props.onDrag,
-          onDragEnd: props.onDragEnd,
-        });
-      }
-      
-      const processedProps = { ...propsRef.current };
-      if (processedProps.icon && typeof processedProps.icon === 'number') {
-        const resolved = Image.resolveAssetSource(processedProps.icon);
-        processedProps.icon = resolved;
-      }
-      
-      mapRef.current.addMarker(markerId, processedProps);
-    };
-    
-    checkAndAdd();
-    
-    return () => {
-      if (markerIdRef.current) {
-        if (eventManager) {
-          eventManager.unregister(markerIdRef.current);
-        }
-        if (mapRef?.current) {
-          mapRef.current.removeMarker(markerIdRef.current);
-        }
-      }
-    };
-  }, []);
-
-  React.useEffect(() => {
-    if (markerIdRef.current && eventManager) {
-      eventManager.register(markerIdRef.current, {
-        onPress: props.onPress,
-        onDragStart: props.onDragStart,
-        onDrag: props.onDrag,
-        onDragEnd: props.onDragEnd,
-      });
-    }
-  }, [eventManager, props.onPress, props.onDragStart, props.onDrag, props.onDragEnd]);
-
-  React.useEffect(() => {
-    if (markerIdRef.current && mapRef?.current) {
-      const processedProps = { ...props };
-      if (processedProps.icon && typeof processedProps.icon === 'number') {
-        const resolved = Image.resolveAssetSource(processedProps.icon);
-        processedProps.icon = resolved;
-      }
-      mapRef.current.updateMarker(markerIdRef.current, processedProps);
-    }
-  }, [
-    mapRef,
-    props.position?.latitude,
-    props.position?.longitude,
-    props.title,
-    props.draggable,
-    props.icon,
-    props.iconWidth,
-    props.iconHeight,
-    props.customViewWidth,
-    props.customViewHeight,
-    props.pinColor
-  ]);
+  // 比较 children（简单比较，可根据需要深度比较）
+  if (prevProps.children !== nextProps.children) {
+    return false;
+  }
   
-  return null;
+  // 其他属性相同，不需要重新渲染
+  return true;
 }
 
+// 导出优化后的组件
+export default React.memo(Marker, arePropsEqual);
+

package/src/components/overlays/Polygon.tsx

@@ -1,98 +1,18 @@
-import { useContext, useEffect, useRef } from 'react';
+import * as React from 'react';
 import type { PolygonProps } from '../../types';
-import { MapContext, PolygonEventContext } from '../../ExpoGaodeMapView';
 
+import { requireNativeViewManager } from 'expo-modules-core';
+const NativePolygonView = requireNativeViewManager<PolygonProps>('PolygonView');
 
 /**
- * 高德地图多边形覆盖物组件
- * 
- * @param props - 多边形配置属性
- * @param props.points - 多边形顶点坐标数组，至少需要3个点
- * @param props.fillColor - 多边形填充颜色，十六进制格式，默认0x440000FF
- * @param props.strokeColor - 多边形边框颜色，默认-16776961
- * @param props.strokeWidth - 多边形边框宽度，默认10
- * @param props.zIndex - 多边形层级，默认0
- * @param props.onPress - 多边形点击事件
- * 
- * @remarks
- * 组件内部会自动生成唯一ID用于标识多边形，并在组件挂载时添加到地图，
- * 更新时同步修改多边形属性，卸载时自动移除多边形。
- * 
- * 注意：points数组长度必须大于等于3才能有效绘制多边形。
+ * 渲染一个高德地图多边形覆盖物组件
+ *
+ * @param props - 多边形属性配置，继承自PolygonProps类型
+ * @returns 高德地图原生多边形视图组件
  */
-export default function Polygon(props: PolygonProps) {
-  const { points, fillColor, strokeColor, strokeWidth, zIndex } = props;
-  const nativeRef = useContext(MapContext);
-  const eventManager = useContext(PolygonEventContext);
-  const polygonIdRef = useRef<string | null>(null);
-  const propsRef = useRef(props);
-  
-  useEffect(() => {
-    propsRef.current = props;
-  }, [props]);
-
-  useEffect(() => {
-    const checkAndAdd = () => {
-      if (!nativeRef?.current) {
-        setTimeout(checkAndAdd, 50);
-        return;
-      }
-      
-      const polygonId = `polygon_${Date.now()}_${Math.random()}`;
-      polygonIdRef.current = polygonId;
-      
-      if (eventManager && props.onPress) {
-        eventManager.register(polygonId, {
-          onPress: props.onPress,
-        });
-      }
-      
-      const { points, fillColor, strokeColor, strokeWidth, zIndex } = propsRef.current;
-      
-      if (points && points.length >= 3) {
-        nativeRef.current.addPolygon(polygonId, {
-          points,
-          fillColor: fillColor ?? '#880000FF',
-          strokeColor: strokeColor ?? '#FFFF0000',
-          strokeWidth: strokeWidth ?? 10,
-          zIndex: zIndex ?? 0,
-        });
-      }
-    };
-    
-    checkAndAdd();
-    
-    return () => {
-      if (polygonIdRef.current) {
-        if (eventManager) {
-          eventManager.unregister(polygonIdRef.current);
-        }
-        if (nativeRef?.current) {
-          nativeRef.current.removePolygon(polygonIdRef.current);
-        }
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    if (polygonIdRef.current && eventManager) {
-      eventManager.register(polygonIdRef.current, {
-        onPress: props.onPress,
-      });
-    }
-  }, [props.onPress]);
-
-  useEffect(() => {
-    if (polygonIdRef.current && nativeRef?.current) {
-      nativeRef.current.updatePolygon(polygonIdRef.current, {
-        points,
-        fillColor,
-        strokeColor,
-        strokeWidth,
-        zIndex,
-      });
-    }
-  }, [points, fillColor, strokeColor, strokeWidth, zIndex]);
-
-  return null;
+function Polygon(props: PolygonProps) {
+  return <NativePolygonView {...props} />;
 }
+
+// 导出优化后的组件
+export default React.memo(Polygon);

package/src/components/overlays/Polyline.tsx

@@ -1,85 +1,19 @@
 
 import * as React from 'react';
-import { MapContext, PolylineEventContext } from '../../ExpoGaodeMapView';
 import type { PolylineProps } from '../../types';
 
+import { requireNativeViewManager } from 'expo-modules-core';
+const NativePolylineView = requireNativeViewManager<PolylineProps>('PolylineView');
 
 /**
- * Polyline 组件用于在高德地图上绘制折线
- * 
- * @param props - 折线的配置属性
- * @param props.points - 折线的坐标点数组
- * @param props.width - 折线的宽度（像素）
- * @param props.color - 折线的颜色（十六进制或RGBA）
- * @param props.onPress - 折线点击事件回调函数
- * @param [props.texture] - 可选，折线的纹理样式
- * 
- * @remarks
- * 组件内部使用 React 的 useEffect 钩子来管理折线的生命周期：
- * 1. 组件挂载时创建折线并添加到地图
- * 2. 组件卸载时自动从地图移除折线
- * 3. 使用 ref 保存折线ID以便清理
+ * 渲染高德地图上的折线覆盖物组件
+ *
+ * @param props - 折线属性配置，继承自PolylineProps类型
+ * @returns 高德地图原生折线视图组件
  */
-export default function Polyline(props: PolylineProps) {
-  const mapRef = React.useContext(MapContext);
-  const eventManager = React.useContext(PolylineEventContext);
-  const polylineIdRef = React.useRef<string | null>(null);
-  const propsRef = React.useRef(props);
-  
-  React.useEffect(() => {
-    propsRef.current = props;
-  }, [props]);
-  
-  React.useEffect(() => {
-    const checkAndAdd = () => {
-      if (!mapRef?.current) {
-        setTimeout(checkAndAdd, 50);
-        return;
-      }
-      
-      const polylineId = `polyline_${Date.now()}_${Math.random()}`;
-      polylineIdRef.current = polylineId;
-      
-      if (eventManager && props.onPress) {
-        eventManager.register(polylineId, {
-          onPress: props.onPress,
-        });
-      }
-      
-      const polylineProps = {
-        points: propsRef.current.points,
-        width: propsRef.current.width,
-        color: propsRef.current.color,
-        ...(propsRef.current.texture && { texture: propsRef.current.texture }),
-        ...(propsRef.current.dotted !== undefined && { dotted: propsRef.current.dotted }),
-        ...(propsRef.current.geodesic !== undefined && { geodesic: propsRef.current.geodesic }),
-        ...(propsRef.current.zIndex !== undefined && { zIndex: propsRef.current.zIndex }),
-      };
-      
-      mapRef.current.addPolyline(polylineId, polylineProps);
-    };
-    
-    checkAndAdd();
-    
-    return () => {
-      if (polylineIdRef.current) {
-        if (eventManager) {
-          eventManager.unregister(polylineIdRef.current);
-        }
-        if (mapRef?.current) {
-          mapRef.current.removePolyline(polylineIdRef.current);
-        }
-      }
-    };
-  }, []);
-
-  React.useEffect(() => {
-    if (polylineIdRef.current && eventManager) {
-      eventManager.register(polylineIdRef.current, {
-        onPress: props.onPress,
-      });
-    }
-  }, [props.onPress]);
-
-  return null;
+function Polyline(props: PolylineProps) {
+  return <NativePolylineView {...props} />;
 }
+
+// 导出优化后的组件
+export default React.memo(Polyline);

package/src/index.ts

@@ -2,36 +2,11 @@
 export * from './ExpoGaodeMap.types';
 export * from './types';
 
-// 导出原生模块
+// 导出原生模块 - 直接使用，无需封装
 export { default as ExpoGaodeMapModule } from './ExpoGaodeMapModule';
 
-// 导出 SDK 模块
-export { default as AMapSDK, initSDK, getVersion } from './modules/AMapSDK';
-
-// 导出定位模块
-export {
-  default as AMapLocation,
-  configure,
-  start,
-  stop,
-  isStarted,
-  getCurrentLocation,
-  addLocationListener,
-  coordinateConvert,
-  startUpdatingHeading,
-  stopUpdatingHeading,
-} from './modules/AMapLocation';
-
-// 导出权限管理模块
-export {
-  default as AMapPermissions,
-  checkLocationPermission,
-  requestLocationPermission,
-} from './modules/AMapPermissions';
-export type { PermissionStatus } from './modules/AMapPermissions';
-
-// 地图视图控制已移至 MapView 的 ref 调用
-// 使用方式: const mapRef = useRef<MapViewRef>(null); mapRef.current.moveCamera() 等
+// 从 ExpoGaodeMapModule 重新导出类型，方便使用
+export type { SDKConfig, PermissionStatus } from './ExpoGaodeMapModule';
 
 // 导出地图视图组件
 export { default as MapView } from './ExpoGaodeMapView';
@@ -48,5 +23,5 @@ export {
   Cluster,
 } from './components/overlays';
 
-// 默认导出：直接重新导出所有模块
+// 默认导出原生模块
 export { default } from './ExpoGaodeMapModule';

package/src/types/map-view.types.ts

@@ -220,41 +220,6 @@ export interface MapViewProps {
    */
   onLocation?: (event: NativeSyntheticEvent<LocationEvent>) => void;
 
-  /**
-   * Marker 点击事件
-   */
-  onMarkerPress?: (event: NativeSyntheticEvent<{ markerId: string } & LatLng>) => void;
-
-  /**
-   * Marker 拖拽开始事件
-   */
-  onMarkerDragStart?: (event: NativeSyntheticEvent<{ markerId: string } & LatLng>) => void;
-
-  /**
-   * Marker 拖拽中事件
-   */
-  onMarkerDrag?: (event: NativeSyntheticEvent<{ markerId: string } & LatLng>) => void;
-
-  /**
-   * Marker 拖拽结束事件
-   */
-  onMarkerDragEnd?: (event: NativeSyntheticEvent<{ markerId: string } & LatLng>) => void;
-
-  /**
-   * Circle 点击事件
-   */
-  onCirclePress?: (event: NativeSyntheticEvent<{ circleId: string } & LatLng>) => void;
-
-  /**
-   * Polygon 点击事件
-   */
-  onPolygonPress?: (event: NativeSyntheticEvent<{ polygonId: string } & LatLng>) => void;
-
-  /**
-   * Polyline 点击事件
-   */
-  onPolylinePress?: (event: NativeSyntheticEvent<{ polylineId: string } & LatLng>) => void;
-
   /**
    * 子组件
    */
@@ -289,55 +254,6 @@ export interface MapViewRef {
   setCenter(center: LatLng, animated?: boolean): Promise<void>;
   setZoom(zoom: number, animated?: boolean): Promise<void>;
   getCameraPosition(): Promise<CameraPosition>;
-  /**
-   * @@deprecated 不推荐使用，请使用声明式添加
-   */
-  addCircle(id: string, props: import('./overlays.types').CircleProps): Promise<void>;
-  /**
-   * @@deprecated 不推荐使用，请使用声明式添加
-   */
-  removeCircle(id: string): Promise<void>;
-  /**
-   * @@deprecated 不推荐使用，请使用声明式添加
-   */
-  updateCircle(id: string, props: Partial<import('./overlays.types').CircleProps>): Promise<void>;
-  /**
-   * @@deprecated 不推荐使用，请使用声明式添加
-   */
-  addMarker(id: string, props: import('./overlays.types').MarkerProps): Promise<void>;
-  /**
-   * @@deprecated 不推荐使用，请使用声明式添加
-   */
-  removeMarker(id: string): Promise<void>;
-  /**
-   * @@deprecated 不推荐使用，请使用声明式添加
-   */
-  updateMarker(id: string, props: Partial<import('./overlays.types').MarkerProps>): Promise<void>;
-  /**
-   * @@deprecated 不推荐使用，请使用声明式添加
-   */
-  addPolyline(id: string, props: import('./overlays.types').PolylineProps): Promise<void>;
-  /**
-   * @@deprecated 不推荐使用，请使用声明式添加
-   */
-  removePolyline(id: string): Promise<void>;
-  /**
-   * @@deprecated 不推荐使用，请使用声明式添加
-   */
-  updatePolyline(id: string, props: Partial<import('./overlays.types').PolylineProps>): Promise<void>; 
-  /**
-   * @@deprecated 不推荐使用，请使用声明式添加
-   */
-  addPolygon(id: string, props: import('./overlays.types').PolygonProps): Promise<void>;
-  
-  /**
-   * @@deprecated 不推荐使用，请使用声明式添加
-   */
-  removePolygon(id: string): Promise<void>;
-  
-  /**
-   * @@deprecated 不推荐使用，请使用声明式添加
-   */
-  updatePolygon(id: string, props: Partial<import('./overlays.types').PolygonProps>): Promise<void>;
+
 }
 

package/src/types/overlays.types.ts

@@ -116,22 +116,22 @@ export interface MarkerProps {
   /**
    * 点击事件
    */
-  onPress?: (event: NativeSyntheticEvent<{}>) => void;
+  onMarkerPress?: (event: NativeSyntheticEvent<LatLng>) => void;
 
   /**
    * 拖拽开始事件
    */
-  onDragStart?: (event: NativeSyntheticEvent<LatLng>) => void;
+  onMarkerDragStart?: (event: NativeSyntheticEvent<LatLng>) => void;
 
   /**
    * 拖拽中事件
    */
-  onDrag?: (event: NativeSyntheticEvent<LatLng>) => void;
+  onMarkerDrag?: (event: NativeSyntheticEvent<LatLng>) => void;
 
   /**
    * 拖拽结束事件
    */
-  onDragEnd?: (event: NativeSyntheticEvent<LatLng>) => void;
+  onMarkerDragEnd?: (event: NativeSyntheticEvent<LatLng>) => void;
 }
 
 /**
@@ -146,12 +146,12 @@ export interface PolylineProps {
   /**
    * 线宽
    */
-  width?: number;
+  strokeWidth?: number;
 
   /**
    * 线条颜色
    */
-  color?: ColorValue;
+  strokeColor?: ColorValue;
 
   /**
    * 层级
@@ -193,7 +193,7 @@ export interface PolylineProps {
   /**
    * 点击事件
    */
-  onPress?: (event: NativeSyntheticEvent<{}>) => void;
+  onPolylinePress?: (event: NativeSyntheticEvent<{}>) => void;
 }
 
 /**
@@ -228,7 +228,7 @@ export interface PolygonProps {
   /**
    * 点击事件
    */
-  onPress?: (event: NativeSyntheticEvent<{}>) => void;
+  onPolygonPress?: (event: NativeSyntheticEvent<{}>) => void;
 }
 
 /**
@@ -268,7 +268,7 @@ export interface CircleProps {
   /**
    * 点击事件
    */
-  onPress?: (event: NativeSyntheticEvent<{}>) => void;
+  onCirclePress?: (event: NativeSyntheticEvent<{}>) => void;
 
 
 }