expo-gaode-map 1.0.7 → 1.0.9

package/docs/EXAMPLES.en.md

@@ -452,7 +452,7 @@ await mapRef.current?.removeCircle('circle1');
 
 ### Marker
 
-**Declarative usage:**
+**Declarative usage - Basic marker:**
 ```tsx
 <MapView style={{ flex: 1 }}>
   <Marker
@@ -466,6 +466,63 @@ await mapRef.current?.removeCircle('circle1');
 </MapView>
 ```
 
+**Declarative usage - Custom icon:**
+```tsx
+import { Image } from 'react-native';
+
+const iconUri = Image.resolveAssetSource(require('./assets/marker-icon.png')).uri;
+
+<MapView style={{ flex: 1 }}>
+  <Marker
+    position={{ latitude: 39.9, longitude: 116.4 }}
+    title="Custom Icon"
+    icon={iconUri}
+    iconWidth={50}
+    iconHeight={50}
+    onPress={() => console.log('Custom icon marker pressed')}
+  />
+</MapView>
+```
+
+**Declarative usage - Custom view:**
+```tsx
+import { View, Text, StyleSheet } from 'react-native';
+
+<MapView style={{ flex: 1 }}>
+  <Marker
+    position={{ latitude: 39.9, longitude: 116.4 }}
+    customViewWidth={120}
+    customViewHeight={40}
+    onPress={() => console.log('Custom view marker pressed')}
+  >
+    <View style={styles.markerContainer}>
+      <Text style={styles.markerText}>Custom Content</Text>
+    </View>
+  </Marker>
+</MapView>
+
+const styles = StyleSheet.create({
+  markerContainer: {
+    backgroundColor: '#fff',
+    padding: 8,
+    borderRadius: 8,
+    borderWidth: 2,
+    borderColor: '#007AFF',
+  },
+  markerText: {
+    color: '#007AFF',
+    fontWeight: 'bold',
+    fontSize: 14,
+  },
+});
+```
+
+> **Important Notes**:
+> - **Custom Icon**: Use `icon` property with `iconWidth` and `iconHeight` to control icon size
+> - **Custom View**: Use `children` with `customViewWidth` and `customViewHeight` to control custom view size
+> - `iconWidth/iconHeight` only apply to `icon` property, not `children`
+> - `customViewWidth/customViewHeight` only apply to `children` property, not `icon`
+
 **Imperative usage:**
 ```tsx
 await mapRef.current?.addMarker('marker1', {

package/docs/EXAMPLES.md

@@ -484,7 +484,7 @@ await mapRef.current?.updateMarker('marker1', {
 await mapRef.current?.removeMarker('marker1');
 ```
 
-> **⚠️ 限制**：命令式 API 添加的 Marker **不支持事件回调**（onPress, onDragEnd 等）。如需事件处理，请使用声明式 `<Marker>` 组件。
+> **⚠️ 限制**：命令式 API 添加的 Marker **不支持事件回调**（onPress, onDragEnd 等）和**自定义视图**。如需这些功能，请使用声明式 `<Marker>` 组件。
 
 #### 自定义图标
 
@@ -511,6 +511,213 @@ const iconUri = Image.resolveAssetSource(require('./assets/marker-icon.png')).ur
 > - 在不同密度屏幕上会自动缩放，保持视觉一致性
 > - 支持网络图片（http/https）和本地图片
 
+#### 自定义视图 ⭐ 推荐
+
+使用 `children` 属性可以完全自定义标记的外观，支持任意 React Native 组件和样式：
+
+**基础自定义视图:**
+```tsx
+import { View, Text, StyleSheet } from 'react-native';
+
+<MapView style={{ flex: 1 }}>
+  <Marker
+    position={{ latitude: 39.9, longitude: 116.4 }}
+    customViewWidth={200}
+    customViewHeight={50}
+    onPress={() => Alert.alert('标记', '点击了自定义标记')}
+  >
+    <View style={styles.markerContainer}>
+      <Text style={styles.markerText}>北京市中心</Text>
+    </View>
+  </Marker>
+</MapView>
+
+const styles = StyleSheet.create({
+  markerContainer: {
+    backgroundColor: '#fff',
+    borderColor: '#2196F3',
+    borderWidth: 2,
+    borderRadius: 12,
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  markerText: {
+    color: '#2196F3',
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+});
+```
+
+**带图标的自定义视图:**
+```tsx
+import { View, Text, Image, StyleSheet } from 'react-native';
+
+<MapView style={{ flex: 1 }}>
+  <Marker
+    position={{ latitude: 39.9, longitude: 116.4 }}
+    iconWidth={150}
+    iconHeight={60}
+  >
+    <View style={styles.customMarker}>
+      <Image
+        source={require('./assets/location-pin.png')}
+        style={styles.markerIcon}
+      />
+      <View style={styles.markerContent}>
+        <Text style={styles.markerTitle}>北京</Text>
+        <Text style={styles.markerSubtitle}>中国首都</Text>
+      </View>
+    </View>
+  </Marker>
+</MapView>
+
+const styles = StyleSheet.create({
+  customMarker: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#4CAF50',
+    borderRadius: 20,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 6,
+  },
+  markerIcon: {
+    width: 24,
+    height: 24,
+    marginRight: 8,
+  },
+  markerContent: {
+    flexDirection: 'column',
+  },
+  markerTitle: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+  markerSubtitle: {
+    color: '#E8F5E9',
+    fontSize: 11,
+  },
+});
+```
+
+**动态内容标记:**
+```tsx
+import { View, Text, StyleSheet } from 'react-native';
+
+function LocationMarker({ location }: { location: Location }) {
+  return (
+    <Marker
+      position={{
+        latitude: location.latitude,
+        longitude: location.longitude
+      }}
+      customViewWidth={220}
+      customViewHeight={60}
+      onPress={() => Alert.alert('位置', location.address)}
+    >
+      <View style={styles.locationMarker}>
+        <Text style={styles.locationTitle} numberOfLines={1}>
+          {location.address || '当前位置'}
+        </Text>
+        <Text style={styles.locationCoords}>
+          {location.latitude.toFixed(6)}, {location.longitude.toFixed(6)}
+        </Text>
+      </View>
+    </Marker>
+  );
+}
+
+const styles = StyleSheet.create({
+  locationMarker: {
+    backgroundColor: '#FF5722',
+    borderRadius: 10,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderLeftWidth: 4,
+    borderLeftColor: '#D84315',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  locationTitle: {
+    color: '#fff',
+    fontSize: 13,
+    fontWeight: '600',
+    marginBottom: 2,
+  },
+  locationCoords: {
+    color: '#FFCCBC',
+    fontSize: 10,
+  },
+});
+```
+
+**价格标签样式:**
+```tsx
+<Marker
+  position={{ latitude: 39.9, longitude: 116.4 }}
+  iconWidth={80}
+  iconHeight={40}
+>
+  <View style={styles.priceTag}>
+    <Text style={styles.priceText}>¥1280</Text>
+    <View style={styles.priceArrow} />
+  </View>
+</Marker>
+
+const styles = StyleSheet.create({
+  priceTag: {
+    backgroundColor: '#FF9800',
+    borderRadius: 8,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    position: 'relative',
+  },
+  priceText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  priceArrow: {
+    position: 'absolute',
+    bottom: -6,
+    left: '50%',
+    marginLeft: -6,
+    width: 0,
+    height: 0,
+    borderLeftWidth: 6,
+    borderRightWidth: 6,
+    borderTopWidth: 6,
+    borderStyle: 'solid',
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderTopColor: '#FF9800',
+  },
+});
+```
+
+> **自定义视图要点**：
+> - ✅ 支持所有 React Native 样式（backgroundColor、borderRadius、flexbox、shadow 等）
+> - ✅ 使用 `iconWidth` 和 `iconHeight` 控制最终显示尺寸
+> - ✅ 子视图会自动转换为图片显示在地图上
+> - ✅ 支持动态内容和复杂布局
+> - ⚠️ 仅支持声明式 `<Marker>` 组件
+> - ⚠️ 建议明确指定 `iconWidth` 和 `iconHeight` 以确保跨设备一致性
+> - ⚠️ iOS 的 shadow 样式可能需要额外配置（shadowColor、shadowOffset 等）
+
 #### Android 特有属性
 
 ```tsx

package/ios/ExpoGaodeMapView.swift

@@ -59,6 +59,7 @@ class ExpoGaodeMapView: ExpoView, MAMapViewDelegate {
     let onMapPress = EventDispatcher()
     let onMapLongPress = EventDispatcher()
     let onLoad = EventDispatcher()
+    let onLocation = EventDispatcher()
     let onMarkerPress = EventDispatcher()
     let onMarkerDragStart = EventDispatcher()
     let onMarkerDrag = EventDispatcher()
@@ -99,6 +100,17 @@ class ExpoGaodeMapView: ExpoView, MAMapViewDelegate {
         
         cameraManager = CameraManager(mapView: mapView)
         uiManager = UIManager(mapView: mapView)
+        
+        // 设置定位变化回调
+        uiManager.onLocationChanged = { [weak self] latitude, longitude, accuracy in
+            self?.onLocation([
+                "latitude": latitude,
+                "longitude": longitude,
+                "accuracy": accuracy,
+                "timestamp": Date().timeIntervalSince1970 * 1000
+            ])
+        }
+        
         overlayManager = OverlayManager(mapView: mapView)
         
         // 设置覆盖物点击回调
@@ -118,6 +130,20 @@ class ExpoGaodeMapView: ExpoView, MAMapViewDelegate {
     override func layoutSubviews() {
         super.layoutSubviews()
         mapView.frame = bounds
+        
+        // 收集并设置 MarkerView
+        collectAndSetupMarkerViews()
+    }
+    
+    /**
+     * 收集所有 MarkerView 子视图并设置地图
+     */
+    private func collectAndSetupMarkerViews() {
+        for subview in subviews {
+            if let markerView = subview as? MarkerView {
+                markerView.setMap(mapView)
+            }
+        }
     }
     
     /**
@@ -125,13 +151,15 @@ class ExpoGaodeMapView: ExpoView, MAMapViewDelegate {
      * 将地图实例传递给覆盖物子视图
      */
     override func addSubview(_ view: UIView) {
-        super.addSubview(view)
-        
-
-        
         if let markerView = view as? MarkerView {
+            // 不添加到视图层级,只调用 setMap
             markerView.setMap(mapView)
-        } else if let circleView = view as? CircleView {
+            return
+        }
+        
+        super.addSubview(view)
+        
+        if let circleView = view as? CircleView {
             circleView.setMap(mapView)
         } else if let polylineView = view as? PolylineView {
             polylineView.setMap(mapView)
@@ -186,6 +214,9 @@ class ExpoGaodeMapView: ExpoView, MAMapViewDelegate {
         uiManager.setShowsTraffic(showsTraffic)
         uiManager.setShowsBuildings(showsBuildings)
         uiManager.setShowsIndoorMap(showsIndoorMap)
+        
+        // 收集并设置所有 MarkerView
+        collectAndSetupMarkerViews()
     }
     
     // MARK: - 缩放控制

package/ios/ExpoGaodeMapViewModule.swift

@@ -9,7 +9,7 @@ public class ExpoGaodeMapViewModule: Module {
         Name("ExpoGaodeMapView")
         
         View(ExpoGaodeMapView.self) {
-            Events("onMapPress", "onMapLongPress", "onLoad", "onMarkerPress", "onMarkerDragStart", "onMarkerDrag", "onMarkerDragEnd", "onCirclePress", "onPolygonPress", "onPolylinePress")
+            Events("onMapPress", "onMapLongPress", "onLoad", "onLocation", "onMarkerPress", "onMarkerDragStart", "onMarkerDrag", "onMarkerDragEnd", "onCirclePress", "onPolygonPress", "onPolylinePress")
             
             Prop("mapType") { (view: ExpoGaodeMapView, type: Int) in
                 view.mapType = type

package/ios/managers/UIManager.swift

@@ -10,12 +10,16 @@ import MAMapKit
  * - 图层显示管理
  * - 用户位置样式配置
  */
-class UIManager {
+class UIManager: NSObject, MAMapViewDelegate {
     /// 弱引用地图视图,避免循环引用
     private weak var mapView: MAMapView?
     
+    /// 定位变化回调
+    var onLocationChanged: ((_ latitude: Double, _ longitude: Double, _ accuracy: Double) -> Void)?
+    
     init(mapView: MAMapView) {
         self.mapView = mapView
+        super.init()
     }
     
     // MARK: - 地图类型
@@ -97,14 +101,38 @@ class UIManager {
      */
     func setShowsUserLocation(_ show: Bool, followUser: Bool) {
         guard let mapView = mapView else { return }
-        mapView.showsUserLocation = show
-        if show && followUser {
-            mapView.userTrackingMode = .follow
+        
+        if show {
+            // 设置代理以监听定位更新
+            if mapView.delegate == nil {
+                mapView.delegate = self
+            }
+            mapView.showsUserLocation = true
+            if followUser {
+                mapView.userTrackingMode = .follow
+            } else {
+                mapView.userTrackingMode = .none
+            }
         } else {
+            mapView.showsUserLocation = false
             mapView.userTrackingMode = .none
         }
     }
     
+    // MARK: - MAMapViewDelegate
+    
+    /**
+     * 定位更新回调
+     */
+    public func mapView(_ mapView: MAMapView, didUpdate userLocation: MAUserLocation, updatingLocation: Bool) {
+        guard updatingLocation, let location = userLocation.location else { return }
+        onLocationChanged?(
+            location.coordinate.latitude,
+            location.coordinate.longitude,
+            location.horizontalAccuracy
+        )
+    }
+    
     /**
      * 设置用户位置样式
      * @param config 样式配置字典

package/ios/overlays/CircleViewModule.swift

@@ -5,8 +5,6 @@ public class CircleViewModule: Module {
         Name("CircleView")
         
         View(CircleView.self) {
-            Events("onPress")
-            
             Prop("center") { (view: CircleView, center: [String: Double]) in
                 view.setCenter(center)
             }