expo-gaode-map 1.0.8 → 1.0.9

package/src/components/overlays/Circle.tsx

@@ -1,8 +1,56 @@
+/*
+ * @Author       : 尚博信_王强 wangqiang03@sunboxsoft.com
+ * @Date         : 2025-11-13 15:02:04
+ * @LastEditors  : 尚博信_王强 wangqiang03@sunboxsoft.com
+ * @LastEditTime : 2025-11-21 10:36:10
+ * @FilePath     : /expo-gaode-map/src/components/overlays/Circle.tsx
+ * @Description  :
+ *
+ * Copyright (c) 2025 by 尚博信_王强, All Rights Reserved.
+ */
 import * as React from 'react';
+import { requireNativeViewManager } from 'expo-modules-core';
 import type { CircleProps } from '../../types';
 import { MapContext, CircleEventContext } from '../../ExpoGaodeMapView';
 
+const NativeCircleView = requireNativeViewManager('CircleView');
+
 export default function Circle(props: CircleProps) {
+  // 如果有 children，使用声明式 API
+  if (props.children) {
+    return <CircleDeclarative {...props} />;
+  }
+  // 否则使用命令式 API
+  return <CircleImperative {...props} />;
+}
+
+function CircleDeclarative(props: CircleProps) {
+  const eventManager = React.useContext(CircleEventContext);
+  const circleIdRef = React.useRef(`circle_${Date.now()}_${Math.random()}`);
+  
+  React.useEffect(() => {
+    if (eventManager) {
+      eventManager.register(circleIdRef.current, {
+        onPress: props.onPress,
+      });
+    }
+    return () => {
+      if (eventManager) {
+        eventManager.unregister(circleIdRef.current);
+      }
+    };
+  }, [props.onPress]);
+  
+  return (
+    <NativeCircleView
+      {...props}
+    >
+      {props.children}
+    </NativeCircleView>
+  );
+}
+
+function CircleImperative(props: CircleProps) {
   const mapRef = React.useContext(MapContext);
   const eventManager = React.useContext(CircleEventContext);
   const circleIdRef = React.useRef<string | null>(null);

package/src/components/overlays/Marker.tsx

@@ -19,6 +19,16 @@ function MarkerDeclarative(props: MarkerProps) {
   const eventManager = React.useContext(MarkerEventContext);
   const markerIdRef = React.useRef(`marker_${Date.now()}_${Math.random()}`);
   
+  // 根据是否有 children 来决定使用哪个尺寸属性
+  // 有 children：使用 customViewWidth/customViewHeight（默认 80x30）
+  // 无 children：使用 iconWidth/iconHeight（用于自定义图标）
+  const containerWidth = props.children
+    ? (props.customViewWidth && props.customViewWidth > 0 ? props.customViewWidth : 80)
+    : (props.iconWidth || 0);
+  const containerHeight = props.children
+    ? (props.customViewHeight && props.customViewHeight > 0 ? props.customViewHeight : 30)
+    : (props.iconHeight || 0);
+  
   React.useEffect(() => {
     if (eventManager) {
       eventManager.register(markerIdRef.current, {
@@ -33,21 +43,27 @@ function MarkerDeclarative(props: MarkerProps) {
         eventManager.unregister(markerIdRef.current);
       }
     };
-  }, [props.onPress, props.onDragStart, props.onDrag, props.onDragEnd]);
+  }, [eventManager, props.onPress, props.onDragStart, props.onDrag, props.onDragEnd]);
   
   return (
     <NativeMarkerView
       position={props.position}
       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}
-      anchor={props.anchor}
       flat={props.flat}
       zIndex={props.zIndex}
-      onPress={props.onPress}
-      onDragStart={props.onDragStart}
-      onDrag={props.onDrag}
-      onDragEnd={props.onDragEnd}
+      anchor={props.anchor}
+      style={{ width: containerWidth, height: containerHeight }}
     >
       {props.children}
     </NativeMarkerView>
@@ -115,7 +131,7 @@ function MarkerImperative(props: MarkerProps) {
         onDragEnd: props.onDragEnd,
       });
     }
-  }, [props.onPress, props.onDragStart, props.onDrag, props.onDragEnd]);
+  }, [eventManager, props.onPress, props.onDragStart, props.onDrag, props.onDragEnd]);
 
   React.useEffect(() => {
     if (markerIdRef.current && mapRef?.current) {
@@ -127,6 +143,7 @@ function MarkerImperative(props: MarkerProps) {
       mapRef.current.updateMarker(markerIdRef.current, processedProps);
     }
   }, [
+    mapRef,
     props.position?.latitude,
     props.position?.longitude,
     props.title,
@@ -134,8 +151,11 @@ function MarkerImperative(props: MarkerProps) {
     props.icon,
     props.iconWidth,
     props.iconHeight,
+    props.customViewWidth,
+    props.customViewHeight,
     props.pinColor
   ]);
   
   return null;
 }
+

package/src/types/location.types.ts

@@ -39,6 +39,11 @@ export interface Coordinates extends LatLng {
    * @platform ios
    */
   isAvailableCoordinate?: boolean;
+
+  /**
+   * 格式化地址（仅在启用逆地理编码时可用）
+   */
+  address?: string;
 }
 
 /**

package/src/types/overlays.types.ts

@@ -22,11 +22,13 @@ export interface MarkerProps {
 
   /**
    * 图标宽度（像素）
+   * 仅在使用 icon 属性时有效
    */
   iconWidth?: number;
 
   /**
    * 图标高度（像素）
+   * 仅在使用 icon 属性时有效
    */
   iconHeight?: number;
 
@@ -93,10 +95,24 @@ export interface MarkerProps {
 
   /**
    * 自定义视图
-   * @note 未实现
+   * 当使用 children 时，会将 React Native 组件渲染为图片显示在地图上
    */
   children?: React.ReactNode;
 
+  /**
+   * 自定义视图宽度（像素）
+   * 仅在使用 children 属性时有效 
+   * @default 80
+   */
+  customViewWidth?: number;
+
+  /**
+   * 自定义视图高度（像素）
+   * 仅在使用 children 属性时有效
+   * @default 30
+   */
+  customViewHeight?: number;
+
   /**
    * 点击事件
    */
@@ -254,6 +270,12 @@ export interface CircleProps {
    */
   onPress?: () => void;
 
+  /**
+   * 自定义子元素
+   * 暂不支持
+   */
+  children?: React.ReactNode;
+
 }
 
 /**