expo-gaode-map 0.1.0 → 0.1.2

package/docs/EXAMPLES.md

@@ -0,0 +1,479 @@
+# 使用示例
+
+完整的使用示例和最佳实践。
+
+## 目录
+
+- [基础地图应用](#基础地图应用)
+- [定位追踪应用](#定位追踪应用)
+- [覆盖物示例](#覆盖物示例)
+- [高级用法](#高级用法)
+
+## 基础地图应用
+
+```tsx
+import React, { useRef, useEffect } from 'react';
+import { View, StyleSheet, Button } from 'react-native';
+import { 
+  MapView, 
+  initSDK,
+  Circle,
+  Marker,
+  Polyline,
+  Polygon,
+  type MapViewRef 
+} from 'expo-gaode-map';
+
+export default function App() {
+  const mapRef = useRef<MapViewRef>(null);
+
+  useEffect(() => {
+    initSDK({
+      androidKey: 'your-android-api-key',
+      iosKey: 'your-ios-api-key',
+    });
+  }, []);
+
+  const handleMoveCamera = async () => {
+    await mapRef.current?.moveCamera(
+      {
+        target: { latitude: 40.0, longitude: 116.5 },
+        zoom: 15,
+      },
+      1000
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <MapView
+        ref={mapRef}
+        style={styles.map}
+        initialCameraPosition={{
+          target: { latitude: 39.9, longitude: 116.4 },
+          zoom: 10,
+        }}
+        myLocationEnabled={true}
+        followUserLocation={false}
+        trafficEnabled={true}
+        onPress={(e) => console.log('点击地图', e)}
+        onLoad={() => console.log('地图加载完成')}
+      >
+        {/* 圆形覆盖物 */}
+        <Circle
+          center={{ latitude: 39.9, longitude: 116.4 }}
+          radius={1000}
+          fillColor="#8800FF00"
+          strokeColor="#FFFF0000"
+          strokeWidth={2}
+        />
+
+        {/* 标记点 */}
+        <Marker
+          position={{ latitude: 39.95, longitude: 116.45 }}
+          title="这是一个标记"
+          draggable={true}
+        />
+
+        {/* 折线 */}
+        <Polyline
+          points={[
+            { latitude: 39.9, longitude: 116.4 },
+            { latitude: 39.95, longitude: 116.45 },
+            { latitude: 40.0, longitude: 116.5 },
+          ]}
+          strokeWidth={5}
+          strokeColor="#FF0000FF"
+        />
+
+        {/* 多边形 */}
+        <Polygon
+          points={[
+            { latitude: 39.85, longitude: 116.35 },
+            { latitude: 39.85, longitude: 116.45 },
+            { latitude: 39.75, longitude: 116.40 },
+          ]}
+          fillColor="#880000FF"
+          strokeColor="#FFFF0000"
+          strokeWidth={2}
+        />
+      </MapView>
+
+      <View style={styles.controls}>
+        <Button title="移动相机" onPress={handleMoveCamera} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  map: {
+    flex: 1,
+  },
+  controls: {
+    position: 'absolute',
+    bottom: 20,
+    left: 20,
+    right: 20,
+  },
+});
+```
+
+## 定位追踪应用
+
+```tsx
+import React, { useEffect, useState } from 'react';
+import { View, Text, Button, StyleSheet } from 'react-native';
+import { 
+  MapView,
+  initSDK,
+  configure,
+  start,
+  stop,
+  getCurrentLocation,
+  addLocationListener,
+  type Location,
+} from 'expo-gaode-map';
+
+export default function LocationApp() {
+  const [location, setLocation] = useState<Location | null>(null);
+  const [isTracking, setIsTracking] = useState(false);
+
+  useEffect(() => {
+    // 初始化 SDK
+    initSDK({
+      androidKey: 'your-android-api-key',
+      iosKey: 'your-ios-api-key',
+    });
+
+    // 配置定位参数
+    configure({
+      withReGeocode: true,
+      mode: 0,
+      interval: 2000,
+    });
+
+    // 监听位置更新
+    const subscription = addLocationListener((loc) => {
+      console.log('位置更新:', loc);
+      setLocation(loc);
+    });
+
+    return () => subscription.remove();
+  }, []);
+
+  const handleStartTracking = () => {
+    start();
+    setIsTracking(true);
+  };
+
+  const handleStopTracking = () => {
+    stop();
+    setIsTracking(false);
+  };
+
+  const handleGetLocation = async () => {
+    try {
+      const loc = await getCurrentLocation();
+      setLocation(loc);
+    } catch (error) {
+      console.error('获取位置失败:', error);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <MapView
+        style={styles.map}
+        myLocationEnabled={true}
+        followUserLocation={isTracking}
+        initialCameraPosition={{
+          target: { 
+            latitude: location?.latitude || 39.9, 
+            longitude: location?.longitude || 116.4 
+          },
+          zoom: 15,
+        }}
+      />
+
+      {location && (
+        <View style={styles.info}>
+          <Text style={styles.infoText}>
+            纬度: {location.latitude.toFixed(6)}
+          </Text>
+          <Text style={styles.infoText}>
+            经度: {location.longitude.toFixed(6)}
+          </Text>
+          <Text style={styles.infoText}>
+            精度: {location.accuracy.toFixed(2)} 米
+          </Text>
+          {location.address && (
+            <Text style={styles.infoText}>
+              地址: {location.address}
+            </Text>
+          )}
+        </View>
+      )}
+
+      <View style={styles.controls}>
+        <Button 
+          title="获取位置" 
+          onPress={handleGetLocation} 
+        />
+        <View style={{ height: 10 }} />
+        <Button 
+          title={isTracking ? '停止追踪' : '开始追踪'}
+          onPress={isTracking ? handleStopTracking : handleStartTracking}
+          color={isTracking ? '#FF3B30' : '#007AFF'}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  map: {
+    flex: 1,
+  },
+  info: {
+    position: 'absolute',
+    top: 50,
+    left: 20,
+    right: 20,
+    backgroundColor: 'white',
+    padding: 15,
+    borderRadius: 10,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  infoText: {
+    fontSize: 14,
+    marginBottom: 5,
+    color: '#333',
+  },
+  controls: {
+    position: 'absolute',
+    bottom: 30,
+    left: 20,
+    right: 20,
+  },
+});
+```
+
+## 覆盖物示例
+
+### Circle (圆形)
+
+**声明式用法:**
+```tsx
+<MapView style={{ flex: 1 }}>
+  <Circle
+    center={{ latitude: 39.9, longitude: 116.4 }}
+    radius={1000}
+    fillColor="#8800FF00"
+    strokeColor="#FFFF0000"
+    strokeWidth={2}
+    onPress={() => console.log('点击圆形')}
+  />
+</MapView>
+```
+
+**命令式用法:**
+```tsx
+const mapRef = useRef<MapViewRef>(null);
+
+await mapRef.current?.addCircle('circle1', {
+  center: { latitude: 39.9, longitude: 116.4 },
+  radius: 1000,
+  fillColor: 0x8800FF00,
+  strokeColor: 0xFFFF0000,
+  strokeWidth: 2,
+});
+
+await mapRef.current?.updateCircle('circle1', {
+  radius: 2000,
+});
+
+await mapRef.current?.removeCircle('circle1');
+```
+
+### Marker (标记点)
+
+**声明式用法:**
+```tsx
+<MapView style={{ flex: 1 }}>
+  <Marker
+    position={{ latitude: 39.9, longitude: 116.4 }}
+    title="标题"
+    description="描述信息"
+    draggable={true}
+    onPress={() => console.log('点击标记')}
+    onDragEnd={(e) => console.log('拖动结束', e)}
+  />
+</MapView>
+```
+
+**命令式用法:**
+```tsx
+await mapRef.current?.addMarker('marker1', {
+  position: { latitude: 39.9, longitude: 116.4 },
+  title: '标题',
+  draggable: true,
+});
+
+await mapRef.current?.updateMarker('marker1', {
+  position: { latitude: 40.0, longitude: 116.5 },
+});
+
+await mapRef.current?.removeMarker('marker1');
+```
+
+### Polyline (折线)
+
+**声明式用法:**
+```tsx
+<MapView style={{ flex: 1 }}>
+  <Polyline
+    points={[
+      { latitude: 39.9, longitude: 116.4 },
+      { latitude: 39.95, longitude: 116.45 },
+      { latitude: 40.0, longitude: 116.5 },
+    ]}
+    strokeWidth={5}
+    strokeColor="#FF0000FF"
+    onPress={() => console.log('点击折线')}
+  />
+</MapView>
+```
+
+**命令式用法:**
+```tsx
+await mapRef.current?.addPolyline('polyline1', {
+  points: [
+    { latitude: 39.9, longitude: 116.4 },
+    { latitude: 40.0, longitude: 116.5 },
+  ],
+  strokeWidth: 5,
+  strokeColor: 0xFFFF0000,
+});
+```
+
+### Polygon (多边形)
+
+**声明式用法:**
+```tsx
+<MapView style={{ flex: 1 }}>
+  <Polygon
+    points={[
+      { latitude: 39.9, longitude: 116.3 },
+      { latitude: 39.9, longitude: 116.4 },
+      { latitude: 39.8, longitude: 116.4 },
+    ]}
+    fillColor="#8800FF00"
+    strokeColor="#FFFF0000"
+    strokeWidth={2}
+    onPress={() => console.log('点击多边形')}
+  />
+</MapView>
+```
+
+**命令式用法:**
+```tsx
+await mapRef.current?.addPolygon('polygon1', {
+  points: [
+    { latitude: 39.9, longitude: 116.3 },
+    { latitude: 39.9, longitude: 116.4 },
+    { latitude: 39.8, longitude: 116.4 },
+  ],
+  fillColor: 0x8800FF00,
+  strokeColor: 0xFFFF0000,
+  strokeWidth: 2,
+});
+```
+
+## 高级用法
+
+### 自定义定位蓝点
+
+```tsx
+import { Image } from 'react-native';
+
+const iconUri = Image.resolveAssetSource(require('./assets/location-icon.png')).uri;
+
+<MapView
+  myLocationEnabled={true}
+  userLocationRepresentation={{
+    showsAccuracyRing: true,
+    fillColor: '#4285F4',
+    strokeColor: '#1967D2',
+    lineWidth: 2,
+    image: iconUri,
+    imageWidth: 40,
+    imageHeight: 40,
+  }}
+/>
+```
+
+### 批量操作覆盖物
+
+```tsx
+const mapRef = useRef<MapViewRef>(null);
+
+const addMultipleOverlays = async () => {
+  await mapRef.current?.addCircle('circle1', {
+    center: { latitude: 39.9, longitude: 116.4 },
+    radius: 1000,
+    fillColor: 0x8800FF00,
+  });
+  
+  await mapRef.current?.addCircle('circle2', {
+    center: { latitude: 40.0, longitude: 116.5 },
+    radius: 500,
+    fillColor: 0x880000FF,
+  });
+  
+  await mapRef.current?.addMarker('marker1', {
+    position: { latitude: 39.95, longitude: 116.45 },
+    title: '北京',
+  });
+};
+
+const clearAll = async () => {
+  await mapRef.current?.removeCircle('circle1');
+  await mapRef.current?.removeCircle('circle2');
+  await mapRef.current?.removeMarker('marker1');
+};
+```
+
+### 缩放级别限制
+
+```tsx
+<MapView
+  maxZoom={18}
+  minZoom={5}
+  initialCameraPosition={{
+    target: { latitude: 39.9, longitude: 116.4 },
+    zoom: 10,
+  }}
+/>
+```
+
+### 方向更新 (iOS)
+
+```tsx
+import { startUpdatingHeading, stopUpdatingHeading } from 'expo-gaode-map';
+
+// 开始方向更新
+startUpdatingHeading();
+
+// 停止方向更新
+stopUpdatingHeading();

package/ios/ColorParser.swift

@@ -0,0 +1,158 @@
+import ExpoModulesCore
+import UIKit
+
+class ColorParser {
+    /**
+     * 将颜色值转换为 UIColor
+     * 支持格式：
+     * - 数字：0xFF0000
+     * - 十六进制字符串："#FF0000" 或 "FF0000"
+     * - 颜色名称："red", "blue", "green" 等
+     */
+    static func parseColor(_ colorValue: Any?) -> UIColor? {
+        guard let colorValue = colorValue else { return nil }
+        
+        // 如果是数字类型
+        if let number = colorValue as? Int {
+            return UIColor(hex: number)
+        }
+        
+        // 如果是字符串类型
+        if let string = colorValue as? String {
+            return parseColorString(string)
+        }
+        
+        return nil
+    }
+    
+    /**
+     * 解析字符串颜色值
+     */
+    private static func parseColorString(_ colorString: String) -> UIColor? {
+        let trimmedString = colorString.trimmingCharacters(in: .whitespacesAndNewlines)
+        
+        // 处理十六进制格式
+        if trimmedString.hasPrefix("#") {
+            return parseHexColor(trimmedString)
+        }
+        
+        // 处理颜色名称
+        if let namedColor = parseNamedColor(trimmedString) {
+            return namedColor
+        }
+        
+        // 处理不带 # 的十六进制
+        if trimmedString.count == 6 || trimmedString.count == 8 {
+            return parseHexColor("#" + trimmedString)
+        }
+        
+        return nil
+    }
+    
+    /**
+     * 解析十六进制颜色
+     */
+    private static func parseHexColor(_ hexString: String) -> UIColor? {
+        var hex = hexString.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
+        var alpha: CGFloat = 1.0
+        
+        // 处理 #RGB 格式
+        if hex.count == 3 {
+            let r = String(repeating: hex[hex.index(hex.startIndex, offsetBy: 0)], count: 2)
+            let g = String(repeating: hex[hex.index(hex.startIndex, offsetBy: 1)], count: 2)
+            let b = String(repeating: hex[hex.index(hex.startIndex, offsetBy: 2)], count: 2)
+            hex = r + g + b
+        }
+        
+        // 处理 #RGBA 格式
+        if hex.count == 4 {
+            let r = String(repeating: hex[hex.index(hex.startIndex, offsetBy: 0)], count: 2)
+            let g = String(repeating: hex[hex.index(hex.startIndex, offsetBy: 1)], count: 2)
+            let b = String(repeating: hex[hex.index(hex.startIndex, offsetBy: 2)], count: 2)
+            let a = String(repeating: hex[hex.index(hex.startIndex, offsetBy: 3)], count: 2)
+            hex = r + g + b + a
+        }
+        
+        // 处理 #RRGGBBAA 格式
+        if hex.count == 8 {
+            let scanner = Scanner(string: hex)
+            var hexNumber: UInt64 = 0
+            
+            if scanner.scanHexInt64(&hexNumber) {
+                let red = CGFloat((hexNumber & 0xff000000) >> 24) / 255
+                let green = CGFloat((hexNumber & 0x00ff0000) >> 16) / 255
+                let blue = CGFloat((hexNumber & 0x0000ff00) >> 8) / 255
+                alpha = CGFloat(hexNumber & 0x000000ff) / 255
+                
+                return UIColor(red: red, green: green, blue: blue, alpha: alpha)
+            }
+        }
+        
+        // 处理 #RRGGBB 格式
+        if hex.count == 6 {
+            let scanner = Scanner(string: hex)
+            var hexNumber: UInt64 = 0
+            
+            if scanner.scanHexInt64(&hexNumber) {
+                let red = CGFloat((hexNumber & 0xff0000) >> 16) / 255
+                let green = CGFloat((hexNumber & 0x00ff00) >> 8) / 255
+                let blue = CGFloat(hexNumber & 0x0000ff) / 255
+                
+                return UIColor(red: red, green: green, blue: blue, alpha: alpha)
+            }
+        }
+        
+        return nil
+    }
+    
+    /**
+     * 解析颜色名称
+     */
+    private static func parseNamedColor(_ colorName: String) -> UIColor? {
+        let colorMap: [String: UIColor] = [
+            // 基础颜色
+            "black": .black,
+            "white": .white,
+            "red": .red,
+            "green": .green,
+            "blue": .blue,
+            "yellow": .yellow,
+            "cyan": .cyan,
+            "magenta": .magenta,
+            "orange": .orange,
+            "purple": .purple,
+            "brown": .brown,
+            "gray": .gray,
+            "lightgray": .lightGray,
+            "darkgray": .darkGray,
+            "clear": .clear,
+            
+            // 常用颜色
+            "pink": UIColor(red: 1.0, green: 0.75, blue: 0.8, alpha: 1.0),
+            "lightblue": UIColor(red: 0.68, green: 0.85, blue: 0.9, alpha: 1.0),
+            "lightgreen": UIColor(red: 0.56, green: 0.93, blue: 0.56, alpha: 1.0),
+            "lightyellow": UIColor(red: 1.0, green: 1.0, blue: 0.88, alpha: 1.0),
+            "lightcyan": UIColor(red: 0.88, green: 1.0, blue: 1.0, alpha: 1.0),
+            "lightmagenta": UIColor(red: 1.0, green: 0.88, blue: 1.0, alpha: 1.0),
+            "darkred": UIColor(red: 0.55, green: 0.0, blue: 0.0, alpha: 1.0),
+            "darkgreen": UIColor(red: 0.0, green: 0.39, blue: 0.0, alpha: 1.0),
+            "darkblue": UIColor(red: 0.0, green: 0.0, blue: 0.55, alpha: 1.0),
+            "darkyellow": UIColor(red: 0.55, green: 0.55, blue: 0.0, alpha: 1.0),
+            "darkcyan": UIColor(red: 0.0, green: 0.55, blue: 0.55, alpha: 1.0),
+            "darkmagenta": UIColor(red: 0.55, green: 0.0, blue: 0.55, alpha: 1.0),
+        ]
+        
+        return colorMap[colorName.lowercased()]
+    }
+}
+
+// UIColor 扩展，支持从数字创建
+extension UIColor {
+    convenience init(hex: Int) {
+        let alpha = CGFloat((hex >> 24) & 0xFF) / 255.0
+        let red = CGFloat((hex >> 16) & 0xFF) / 255.0
+        let green = CGFloat((hex >> 8) & 0xFF) / 255.0
+        let blue = CGFloat(hex & 0xFF) / 255.0
+        self.init(red: red, green: green, blue: blue, alpha: alpha)
+    }
+}

package/ios/ExpoGaodeMap.podspec

@@ -20,6 +20,7 @@ Pod::Spec.new do |s|
 
   s.dependency 'ExpoModulesCore'
   s.dependency 'AMap3DMap', '10.0.600'
+  s.dependency "AMapLocation"
   # Swift/Objective-C compatibility
   s.pod_target_xcconfig = {
     'DEFINES_MODULE' => 'YES',