expo-gaode-map 0.1.1 → 0.1.2

package/lib/src/map-view.tsx

@@ -0,0 +1,230 @@
+import * as React from "react";
+import {
+  NativeMethods,
+  NativeSyntheticEvent,
+  requireNativeComponent,
+  ViewProps,
+} from "react-native";
+import Component from "./component";
+import { CameraPosition, LatLng, LatLngBounds, MapPoi, MapType, Point } from "./types";
+
+export interface CameraEvent {
+  cameraPosition: CameraPosition;
+  latLngBounds: LatLngBounds;
+}
+
+export interface MapViewProps extends ViewProps {
+  /**
+   * 地图类型
+   */
+  mapType?: MapType;
+
+  /**
+   * 初始状态
+   */
+  initialCameraPosition?: CameraPosition;
+
+  /**
+   * 是否显示当前定位
+   */
+  myLocationEnabled?: boolean;
+  myLocationIcon?:boolean;
+  /**
+   * 是否显示室内地图
+   */
+  indoorViewEnabled?: boolean;
+
+  /**
+   * 是否显示3D建筑
+   */
+  buildingsEnabled?: boolean;
+
+  /**
+   * 是否显示标注
+   */
+  labelsEnabled?: boolean;
+
+  /**
+   * 是否显示指南针
+   */
+  compassEnabled?: boolean;
+
+  /**
+   * 是否显示放大缩小按钮
+   *
+   * @platform android
+   */
+  zoomControlsEnabled?: boolean;
+
+  /**
+   * 是否显示比例尺
+   */
+  scaleControlsEnabled?: boolean;
+
+  /**
+   * 是否显示定位按钮
+   *
+   * @platform android
+   */
+  myLocationButtonEnabled?: boolean;
+
+  /**
+   * 是否显示路况
+   */
+  trafficEnabled?: boolean;
+
+  /**
+   * 最大缩放级别
+   */
+  maxZoom?: number;
+
+  /**
+   * 最小缩放级别
+   */
+  minZoom?: number;
+
+  /**
+   * 是否启用缩放手势，用于放大缩小
+   */
+  zoomGesturesEnabled?: boolean;
+
+  /**
+   * 是否启用滑动手势，用于平移
+   */
+  scrollGesturesEnabled?: boolean;
+
+  /**
+   * 是否启用旋转手势，用于调整方向
+   */
+  rotateGesturesEnabled?: boolean;
+
+  /**
+   * 是否启用倾斜手势，用于改变视角
+   */
+  tiltGesturesEnabled?: boolean;
+
+  /**
+   * 设定定位的最小更新距离
+   *
+   * @platform ios
+   */
+  distanceFilter?: number;
+
+  /**
+   * 设定最小更新角度，默认为 1 度
+   *
+   * @platform ios
+   */
+  headingFilter?: number;
+
+  /**
+   * 点击事件
+   */
+  onPress?: (event: NativeSyntheticEvent<LatLng>) => void;
+
+  /**
+   * 标注点击事件
+   */
+  onPressPoi?: (event: NativeSyntheticEvent<MapPoi>) => void;
+
+  /**
+   * 长按事件
+   */
+  onLongPress?: (event: NativeSyntheticEvent<LatLng>) => void;
+
+  /**
+   * 地图状态改变事件，随地图状态变化不停地触发
+   */
+  onCameraMove?: (event: NativeSyntheticEvent<CameraEvent>) => void;
+
+  /**
+   * 地图状态改变事件，在停止变化后触发
+   */
+  onCameraIdle?: (event: NativeSyntheticEvent<CameraEvent>) => void;
+
+  /**
+   * 地图初始化完成事件
+   */
+  onLoad?: (event: NativeSyntheticEvent<void>) => void;
+
+  /**
+   * 地图定位更新事件
+   */
+  onLocation?: (event: NativeSyntheticEvent<GeolocationPosition>) => void;
+}
+
+const name = "AMapView";
+const NativeMapView = requireNativeComponent<MapViewProps>(name);
+
+export default class extends Component<MapViewProps> {
+  static defaultProps = {
+    style: { flex: 1 },
+    compassEnabled: true,
+    scaleControlsEnabled: true,
+    distanceFilter: 1,
+  };
+
+  name = name;
+  ref?: (React.Component<MapViewProps> & NativeMethods) | null;
+  state = { loaded: false };
+  callbackMap: { [key: number]: (data: any) => void } = {};
+
+  /**
+   * 移动视角
+   */
+  moveCamera(cameraPosition: CameraPosition, duration = 0) {
+    this.invoke("moveCamera", [cameraPosition, duration]);
+  }
+
+  /**
+   * 点坐标转地理坐标，主要用于地图选点
+   */
+  getLatLng(point: Point): Promise<LatLng> {
+    return this.call("getLatLng", point);
+  }
+
+  callback = ({ nativeEvent }: NativeSyntheticEvent<{ id: number; data: any }>) => {
+    this.callbackMap[nativeEvent.id]?.call(this, nativeEvent.data);
+    delete this.callbackMap[nativeEvent.id];
+  };
+
+  call(name: string, args: any): Promise<any> {
+    const id = Math.random();
+    this.invoke("call", [id, name, args]);
+    return new Promise((resolve) => (this.callbackMap[id] = resolve));
+  }
+
+  componentDidMount() {
+    super.componentDidMount();
+    // 无论如何也要在 1 秒后 setLoaded(true) ，防止 onLoad 事件不触发的情况下显示不正常
+    // 目前只在 iOS 上低概率出现
+    setTimeout(() => this.setState({ loaded: true }), 1000);
+  }
+
+  render() {
+    let { style, onLoad } = this.props;
+    if (!this.state.loaded) {
+      style = [style, { width: 1, height: 1 }];
+    }
+    return (
+      <NativeMapView
+        {...this.props}
+        ref={(ref) => (this.ref = ref)}
+        style={style}
+        // @ts-ignore: 内部接口
+        onCallback={this.callback}
+        onPress={(event) => {
+          if (event.nativeEvent.latitude) {
+            this.props.onPress?.call(this, event);
+          }
+        }}
+        onLoad={(event) => {
+          // android 地图部分控件不显示的问题在重新 layout 之后会恢复正常。
+          // 同时也能修复 ios 地图偶尔出现的 layout 异常
+          this.setState({ loaded: true });
+          onLoad?.call(this, event);
+        }}
+      />
+    );
+  }
+}

package/lib/src/marker.tsx

@@ -0,0 +1,128 @@
+import * as React from "react";
+import {
+  ImageSourcePropType,
+  NativeSyntheticEvent,
+  requireNativeComponent,
+  ViewStyle,
+} from "react-native";
+import { View } from "@/components/Themed";
+// @ts-ignore
+import resolveAssetSource from "react-native/Libraries/Image/resolveAssetSource";
+import Component from "./component";
+import { LatLng, Point } from "./types";
+
+export interface MarkerProps {
+  /**
+   * 坐标
+   */ position: LatLng;
+
+  /**
+   * 图标
+   */
+  icon?: ImageSourcePropType;
+
+  /**
+   * 透明度 [0, 1]
+   *
+   * @platform android
+   */
+  opacity?: number;
+
+  /**
+   * 是否可拖拽
+   */
+  draggable?: boolean;
+
+  /**
+   * 是否平贴地图
+   *
+   * @platform android
+   */
+  flat?: boolean;
+
+  /**
+   * 层级
+   */
+  zIndex?: number;
+
+  /**
+   * 覆盖物锚点比例
+   *
+   * @link http://a.amap.com/lbs/static/unzip/Android_Map_Doc/3D/com/amap/api/maps/model/Marker.html#setAnchor-float-float-
+   * @platform android
+   */
+  anchor?: Point;
+
+  /**
+   * 覆盖物偏移位置
+   *
+   * @link http://a.amap.com/lbs/static/unzip/iOS_Map_Doc/AMap_iOS_API_Doc_3D/interface_m_a_annotation_view.html#a78f23c1e6a6d92faf12a00877ac278a7
+   * @platform ios
+   */
+  centerOffset?: Point;
+
+  /**
+   * 自定义 View
+   */
+  children?: React.ReactNode;
+
+  /**
+   * 点击事件
+   */
+  onPress?: () => void;
+
+  /**
+   * 拖放开始事件
+   */
+  onDragStart?: () => void;
+
+  /**
+   * 拖放进行事件，类似于 mousemove，在结束之前会不断调用
+   */
+  onDrag?: () => void;
+
+  /**
+   * 拖放结束事件
+   */
+  onDragEnd?: (event: NativeSyntheticEvent<LatLng>) => void;
+}
+
+export default class extends Component<MarkerProps> {
+  name = name;
+
+  /**
+   * 触发自定义 view 更新
+   *
+   * 通常来说，不需要主动调用该方法，对于 android，如果自定义 view 存在异步更新，
+   * 例如，包含一个引用了网络图片的 <Image />，则需要在 view 更新后主动调用该方法触发
+   * icon 更新。
+   */
+  update = () => {
+    setTimeout(() => this.invoke("update"), 0);
+  };
+
+  componentDidUpdate() {
+    if (this.props.children) {
+      this.update();
+    }
+  }
+
+  render() {
+    const props = { ...this.props };
+    Reflect.set(props, "latLng", props.position);
+    // @ts-ignore android 不能用 position 作为属性，会发生冲突，也是个蛋疼的问题
+    delete props.position;
+    if (props.children) {
+      props.children = (
+        <View style={style} onLayout={this.update}>
+          {props.children}
+        </View>
+      );
+    }
+    return <NativeMarker {...props} icon={resolveAssetSource(props.icon)} />;
+  }
+}
+
+const name = "AMapMarker";
+const style: ViewStyle = { position: "absolute", zIndex: -1 };
+const NativeMarker = requireNativeComponent<MarkerProps>(name);

package/lib/src/multi-point.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { ImageSourcePropType, NativeSyntheticEvent, requireNativeComponent } from "react-native";
+// @ts-ignore
+import resolveAssetSource from "react-native/Libraries/Image/resolveAssetSource";
+import { LatLng } from "./types";
+
+const NativeMultiPoint = requireNativeComponent<MultiPointProps>("AMapMultiPoint");
+
+export interface MultiPointProps {
+  /**
+   * 坐标点集合
+   */
+  items?: LatLng[];
+
+  /**
+   * 图标
+   */
+  icon?: ImageSourcePropType;
+
+  /**
+   * 点击事件
+   */
+  onPress?: (event: NativeSyntheticEvent<{ index: number }>) => void;
+}
+
+export default (props: MultiPointProps) => {
+  return <NativeMultiPoint {...props} icon={resolveAssetSource(props.icon)} />;
+};

package/lib/src/polygon.tsx

@@ -0,0 +1,31 @@
+import { requireNativeComponent } from "react-native";
+import { LatLng } from "./types";
+
+export interface Polygon {
+  /**
+   * 节点坐标
+   */
+  points: LatLng[];
+
+  /**
+   * 边线宽度
+   */
+  strokeWidth?: number;
+
+  /**
+   * 边线颜色
+   */
+  strokeColor?: string;
+
+  /**
+   * 填充颜色
+   */
+  fillColor?: string;
+
+  /**
+   * 层级
+   */
+  zIndex?: number;
+}
+
+export default requireNativeComponent<Polygon>("AMapPolygon");

package/lib/src/polyline.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { ColorValue, Platform, processColor, requireNativeComponent } from "react-native";
+import { LatLng } from "./types";
+
+export interface PolylineProps {
+  /**
+   * 节点坐标
+   */
+  points: LatLng[];
+
+  /**
+   * 线段宽度
+   */
+  width?: number;
+
+  /**
+   * 线段颜色
+   */
+  color?: ColorValue;
+
+  /**
+   * 层级
+   */
+  zIndex?: number;
+
+  /**
+   * 多段颜色
+   */
+  colors: ColorValue[];
+
+  /**
+   * 是否使用颜色渐变
+   */
+  gradient?: boolean;
+
+  /**
+   * 是否绘制大地线
+   */
+  geodesic?: boolean;
+
+  /**
+   * 是否绘制虚线
+   */
+  dotted?: boolean;
+
+  /**
+   * 点击事件
+   */
+  onPress?: () => void;
+}
+
+export default class extends React.PureComponent<PolylineProps> {
+  static defaultProps = { colors: [] };
+
+  render() {
+    const props = {
+      ...this.props,
+      ...Platform.select({ android: { colors: this.props.colors.map(processColor) } }),
+    };
+    // @ts-ignore
+    return <NativePolyline {...props} />;
+  }
+}
+
+const NativePolyline = requireNativeComponent<PolylineProps>("AMapPolyline");

package/lib/src/sdk.ts

@@ -0,0 +1,11 @@
+import { NativeModules } from "react-native";
+
+const { AMapSdk } = NativeModules;
+
+export function init(apiKey?: string) {
+  AMapSdk.initSDK(apiKey);
+}
+
+export function getVersion(): Promise<string> {
+  return AMapSdk.getVersion();
+}

package/lib/src/types.ts

@@ -0,0 +1,137 @@
+/**
+ * 点坐标
+ */
+export interface Point {
+  x: number;
+  y: number;
+}
+
+/**
+ * 地理坐标
+ */
+export interface LatLng {
+  /**
+   * 纬度
+   */
+  latitude: number;
+
+  /**
+   * 经度
+   */
+  longitude: number;
+}
+
+/**
+ * 地图标注点
+ */
+export interface MapPoi {
+  /**
+   * 标注点 ID
+   */
+  id: string;
+
+  /**
+   * 标注点名称
+   */
+  name: string;
+
+  /**
+   * 标注点坐标
+   */
+  position: LatLng;
+}
+
+/**
+ * 矩形坐标边界
+ */
+export interface LatLngBounds {
+  /**
+   * 西南坐标
+   */
+  southwest: LatLng;
+
+  /**
+   * 东北坐标
+   */
+  northeast: LatLng;
+}
+
+/**
+ * 地图状态
+ */
+export interface CameraPosition {
+  /**
+   * 中心坐标
+   */
+  target?: LatLng;
+
+  /**
+   * 缩放级别
+   */
+  zoom?: number;
+
+  /**
+   * 朝向、旋转角度
+   */
+  bearing?: number;
+
+  /**
+   * 倾斜角度
+   */
+  tilt?: number;
+}
+
+/**
+ * 定位
+ */
+export interface Location extends LatLng {
+  /**
+   * 精度
+   */
+  accuracy: number;
+
+  /**
+   * 朝向
+   */
+  heading: number;
+
+  /**
+   * 海拔
+   */
+  altitude: number;
+
+  /**
+   * 运动速度
+   */
+  speed: number;
+}
+
+/**
+ * 地图类型
+ */
+export enum MapType {
+  /**
+   * 标准地图
+   */
+  Standard,
+
+  /**
+   * 卫星地图
+   */
+  Satellite,
+
+  /**
+   * 夜间地图
+   */
+  Night,
+
+  /**
+   * 导航地图
+   */
+  Navi,
+
+  /**
+   * 公交地图
+   */
+  Bus,
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "expo-gaode-map",
-  "version": "0.1.1",
-  "description": "高德地图 react-native 安卓和 ios",
+  "version": "0.1.2",
+  "description": "一个功能完整的高德地图 React Native 组件库，基于 Expo Modules 开发，提供地图显示、定位、覆盖物等功能。",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "scripts": {

package/src/components/overlays/Polyline.tsx

@@ -2,7 +2,7 @@
  * @Author       : 尚博信_王强 wangqiang03@sunboxsoft.com
  * @Date         : 2025-11-13 15:01:30
  * @LastEditors  : 尚博信_王强 wangqiang03@sunboxsoft.com
- * @LastEditTime : 2025-11-13 19:06:00
+ * @LastEditTime : 2025-11-14 15:48:14
  * @FilePath     : /expo-gaode-map/src/components/overlays/Polyline.tsx
  * @Description  : 地图折线组件 - 使用命令式 API
  * 
@@ -33,36 +33,28 @@ import type { PolylineProps } from '../../types';
 export default function Polyline(props: PolylineProps) {
   const mapRef = React.useContext(MapContext);
   const polylineIdRef = React.useRef<string>(`polyline_${Date.now()}_${Math.random()}`);
-
-  console.log('Polyline 组件渲染，props:', props);
+  const isInitialMount = React.useRef(true);
 
   // 添加折线
   React.useEffect(() => {
     const polylineId = polylineIdRef.current;
     
-    console.log('Polyline useEffect - 添加折线到地图');
-    mapRef?.current?.addPolyline?.(polylineId, props).then(() => {
-      console.log('✅ 折线已添加:', polylineId);
-    }).catch((error: any) => {
-      console.error('❌ 添加折线失败:', error);
-    });
+    mapRef?.current?.addPolyline?.(polylineId, props);
 
     return () => {
-      console.log('Polyline useEffect cleanup - 移除折线');
-      mapRef?.current?.removePolyline?.(polylineId).catch((error: any) => {
-        console.error('❌ 移除折线失败:', error);
-      });
+      mapRef?.current?.removePolyline?.(polylineId);
     };
   }, []);
 
-  // 监听 Props 变化，更新折线
+  // 监听 Props 变化，更新折线（跳过初始渲染）
   React.useEffect(() => {
-    const polylineId = polylineIdRef.current;
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
     
-    console.log('Polyline props 变化，更新折线:', props);
-    mapRef?.current?.updatePolyline?.(polylineId, props).catch((error: any) => {
-      console.error('❌ 更新折线失败:', error);
-    });
+    const polylineId = polylineIdRef.current;
+    mapRef?.current?.updatePolyline?.(polylineId, props);
   }, [props.points, props.width, props.color]);
 
   return null;

package/src/index.ts

@@ -2,7 +2,7 @@
  * @Author       : 尚博信_王强 wangqiang03@sunboxsoft.com
  * @Date         : 2025-11-13 14:45:15
  * @LastEditors  : 尚博信_王强 wangqiang03@sunboxsoft.com
- * @LastEditTime : 2025-11-13 18:26:20
+ * @LastEditTime : 2025-11-14 16:15:52
  * @FilePath     : /expo-gaode-map/src/index.ts
  * @Description  : 高德地图 Expo Module 主导出文件
  * 
@@ -17,7 +17,7 @@ export * from './types';
 export { default as ExpoGaodeMapModule } from './ExpoGaodeMapModule';
 
 // 导出 SDK 模块
-export { default as AMapSDK, initSDK, setApiKey, getVersion } from './modules/AMapSDK';
+export { default as AMapSDK, initSDK, getVersion } from './modules/AMapSDK';
 
 // 导出定位模块
 export {