expo-gaode-map 1.0.2 → 1.0.4

package/src/components/overlays/Polygon.tsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useRef } from 'react';
 import type { PolygonProps } from '../../types';
-import { MapContext } from '../../ExpoGaodeMapView';
+import { MapContext, PolygonEventContext } from '../../ExpoGaodeMapView';
 
 
 /**
@@ -12,6 +12,7 @@ import { MapContext } from '../../ExpoGaodeMapView';
  * @param props.strokeColor - 多边形边框颜色，默认-16776961
  * @param props.strokeWidth - 多边形边框宽度，默认10
  * @param props.zIndex - 多边形层级，默认0
+ * @param props.onPress - 多边形点击事件
  * 
  * @remarks
  * 组件内部会自动生成唯一ID用于标识多边形，并在组件挂载时添加到地图，
@@ -22,70 +23,66 @@ import { MapContext } from '../../ExpoGaodeMapView';
 export default function Polygon(props: PolygonProps) {
   const { points, fillColor, strokeColor, strokeWidth, zIndex } = props;
   const nativeRef = useContext(MapContext);
-  const polygonIdRef = useRef<string>(`polygon_${Date.now()}_${Math.random()}`);
-
+  const eventManager = useContext(PolygonEventContext);
+  const polygonIdRef = useRef<string | null>(null);
+  const propsRef = useRef(props);
+  
   useEffect(() => {
-    const polygonId = polygonIdRef.current;
+    propsRef.current = props;
+  }, [props]);
 
-    // 添加多边形
-    if (nativeRef?.current && points && points.length >= 3) {
-      try {
-        console.log('🟦 Polygon 组件调用 addPolygon:', polygonId, {
-          points,
-          fillColor: fillColor ?? 0x440000FF,
-          strokeColor: strokeColor ?? -16776961,
-          strokeWidth: strokeWidth ?? 10,
-          zIndex: zIndex ?? 0,
+  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 ?? 0x440000FF,
-          strokeColor: strokeColor ?? -16776961,
+          fillColor: fillColor ?? '#880000FF',
+          strokeColor: strokeColor ?? '#FFFF0000',
           strokeWidth: strokeWidth ?? 10,
           zIndex: zIndex ?? 0,
         });
-        
-        console.log('✅ Polygon addPolygon 调用完成');
-      } catch (error) {
-        console.error('❌ 添加多边形失败:', error);
       }
-    } else {
-      console.warn('⚠️ Polygon 组件条件不满足:', {
-        hasNativeRef: !!nativeRef?.current,
-        hasPoints: !!points,
-        pointsLength: points?.length,
-      });
-    }
-
-    // 清理函数
+    };
+    
+    checkAndAdd();
+    
     return () => {
-      if (nativeRef?.current) {
-        try {
-          nativeRef.current.removePolygon(polygonId);
-        } catch (error) {
-          console.error('移除多边形失败:', error);
+      if (polygonIdRef.current) {
+        if (eventManager) {
+          eventManager.unregister(polygonIdRef.current);
+        }
+        if (nativeRef?.current) {
+          nativeRef.current.removePolygon(polygonIdRef.current);
         }
       }
     };
   }, []);
 
-  // 更新多边形属性
   useEffect(() => {
-    const polygonId = polygonIdRef.current;
-
-    if (nativeRef?.current) {
-      try {
-        nativeRef.current.updatePolygon(polygonId, {
-          points,
-          fillColor,
-          strokeColor,
-          strokeWidth,
-          zIndex,
-        });
-      } catch (error) {
-        console.error('更新多边形失败:', error);
-      }
+    if (polygonIdRef.current && nativeRef?.current) {
+      nativeRef.current.updatePolygon(polygonIdRef.current, {
+        points,
+        fillColor,
+        strokeColor,
+        strokeWidth,
+        zIndex,
+      });
     }
   }, [points, fillColor, strokeColor, strokeWidth, zIndex]);
 

package/src/components/overlays/Polyline.tsx

@@ -1,5 +1,6 @@
+
 import * as React from 'react';
-import { MapContext } from '../../ExpoGaodeMapView';
+import { MapContext, PolylineEventContext } from '../../ExpoGaodeMapView';
 import type { PolylineProps } from '../../types';
 
 
@@ -10,6 +11,7 @@ import type { PolylineProps } from '../../types';
  * @param props.points - 折线的坐标点数组
  * @param props.width - 折线的宽度（像素）
  * @param props.color - 折线的颜色（十六进制或RGBA）
+ * @param props.onPress - 折线点击事件回调函数
  * @param [props.texture] - 可选，折线的纹理样式
  * 
  * @remarks
@@ -20,25 +22,54 @@ import type { PolylineProps } from '../../types';
  */
 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(() => {
-    const polylineId = `polyline_${Date.now()}_${Math.random()}`;
-    polylineIdRef.current = polylineId;
-    
-    // 只传递必要的属性
-    const polylineProps = {
-      points: props.points,
-      width: props.width,
-      color: props.color,
-      ...(props.texture && { texture: props.texture }),
+    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);
     };
     
-    mapRef?.current?.addPolyline?.(polylineId, polylineProps);
-
+    checkAndAdd();
+    
     return () => {
-      mapRef?.current?.removePolyline?.(polylineId);
+      if (polylineIdRef.current) {
+        if (eventManager) {
+          eventManager.unregister(polylineIdRef.current);
+        }
+        if (mapRef?.current) {
+          mapRef.current.removePolyline(polylineIdRef.current);
+        }
+      }
     };
   }, []);
 

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

@@ -199,6 +199,41 @@ export interface MapViewProps {
    */
   onLocation?: (event: Location) => void;
 
+  /**
+   * Marker 点击事件
+   */
+  onMarkerPress?: (event: { markerId: string } & LatLng) => void;
+
+  /**
+   * Marker 拖拽开始事件
+   */
+  onMarkerDragStart?: (event: { markerId: string } & LatLng) => void;
+
+  /**
+   * Marker 拖拽中事件
+   */
+  onMarkerDrag?: (event: { markerId: string } & LatLng) => void;
+
+  /**
+   * Marker 拖拽结束事件
+   */
+  onMarkerDragEnd?: (event: { markerId: string } & LatLng) => void;
+
+  /**
+   * Circle 点击事件
+   */
+  onCirclePress?: (event: { circleId: string } & LatLng) => void;
+
+  /**
+   * Polygon 点击事件
+   */
+  onPolygonPress?: (event: { polygonId: string } & LatLng) => void;
+
+  /**
+   * Polyline 点击事件
+   */
+  onPolylinePress?: (event: { polylineId: string } & LatLng) => void;
+
   /**
    * 子组件
    */

package/src/types/overlays.types.ts

@@ -18,7 +18,17 @@ export interface MarkerProps {
   /**
    * 图标
    */
-  icon?: ImageSourcePropType;
+  icon?: string | ImageSourcePropType;
+
+  /**
+   * 图标宽度（像素）
+   */
+  iconWidth?: number;
+
+  /**
+   * 图标高度（像素）
+   */
+  iconHeight?: number;
 
   /**
    * 标题
@@ -33,6 +43,7 @@ export interface MarkerProps {
   /**
    * 透明度 [0, 1]
    * @platform android
+   * @note iOS 不支持
    */
   opacity?: number;
 
@@ -44,17 +55,21 @@ export interface MarkerProps {
   /**
    * 是否平贴地图
    * @platform android
+   * @note iOS 不支持
    */
   flat?: boolean;
 
   /**
    * 层级
+   * @platform android
+   * @note iOS 不支持 (使用 displayPriority)
    */
   zIndex?: number;
 
   /**
    * 覆盖物锚点比例
    * @platform android
+   * @note iOS 使用 centerOffset
    */
   anchor?: Point;
 
@@ -64,8 +79,21 @@ export interface MarkerProps {
    */
   centerOffset?: Point;
 
+  /**
+   * 是否显示动画
+   * @platform ios
+   */
+  animatesDrop?: boolean;
+
+  /**
+   * 大头针颜色
+   * @platform ios
+   */
+  pinColor?: 'red' | 'green' | 'purple';
+
   /**
    * 自定义视图
+   * @note 未实现
    */
   children?: React.ReactNode;
 
@@ -121,16 +149,22 @@ export interface PolylineProps {
 
   /**
    * 是否使用渐变色
+   * @platform android
+   * @note iOS 不支持
    */
   gradient?: boolean;
 
   /**
    * 是否绘制大地线
+   * @platform android
+   * @note iOS 不支持
    */
   geodesic?: boolean;
 
   /**
    * 是否绘制虚线
+   * @platform android
+   * @note iOS 不支持
    */
   dotted?: boolean;
 
@@ -219,6 +253,7 @@ export interface CircleProps {
    * 点击事件
    */
   onPress?: () => void;
+
 }
 
 /**