优化 Overlay 的实现方式

README.md

@@ -113,18 +113,18 @@ import MapView from 'react-native-amap3d'
 ```jsx
 <Marker
   icon={() =>
-    <Overlay style={styles.customMarker}>
+    <View style={styles.customMarker}>
       <Image style={styles.customIcon} source={require('marker.png')}/>
-    </Overlay>
+    </View>
   }
   coordinate={{
     latitude: 39.706901,
     longitude: 116.397972,
   }}
 >
-  <InfoWindow style={styles.customInfoWindow}>
+  <View style={styles.customInfoWindow}>
     <Text>自定义信息窗体</Text>
-  </InfoWindow>
+  </View>
 </Marker>
 ```
 
@@ -157,7 +157,7 @@ import MapView from 'react-native-amap3d'
 - [x] 手势交互（平移、缩放、旋转、倾斜）
 - [x] 中心坐标、缩放级别、倾斜度
 - [x] 地图事件（onPress、onLongPress、onLocation）
-- [ ] 地图标记（Marker）
+- [x] 地图标记（Marker）
   - [x] 基本属性及事件
   - [x] 自定义信息窗体
   - [x] 自定义图标

android/src/main/java/cn/qiuxiang/react/amap3d/AMap3DPackage.kt

@@ -20,7 +20,6 @@ class AMap3DPackage : ReactPackage {
                 AMapViewManager(),
                 AMapMarkerManager(),
                 AMapOverlayManager(),
-                AMapInfoWindowManager(),
                 AMapPolylineManager(),
                 AMapPolygonManager(),
                 AMapCircleManager())

android/src/main/java/cn/qiuxiang/react/amap3d/AMapInfoWindow.kt

-package cn.qiuxiang.react.amap3d
-
-import android.content.Context
-import com.facebook.react.views.view.ReactViewGroup
-
-class AMapInfoWindow(context: Context) : ReactViewGroup(context)

android/src/main/java/cn/qiuxiang/react/amap3d/AMapInfoWindowManager.kt

-package cn.qiuxiang.react.amap3d
-
-import android.view.ViewGroup.LayoutParams
-import com.facebook.react.uimanager.LayoutShadowNode
-import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.uimanager.ViewGroupManager
-
-class AMapInfoWindowManager : ViewGroupManager<AMapInfoWindow>() {
-    override fun getName(): String {
-        return "AMapInfoWindow"
-    }
-
-    override fun createViewInstance(reactContext: ThemedReactContext): AMapInfoWindow {
-        return AMapInfoWindow(reactContext)
-    }
-
-    override fun createShadowNodeInstance(): LayoutShadowNode {
-        return LayoutNode()
-    }
-
-    override fun updateExtraData(infoWindow: AMapInfoWindow, extraData: Any) {
-        val data = extraData as LayoutNode.Layout
-        infoWindow.layoutParams = LayoutParams(data.width, data.height)
-    }
-}

android/src/main/java/cn/qiuxiang/react/amap3d/AMapMarker.kt

@@ -23,7 +23,7 @@ class AMapMarker(context: ThemedReactContext) : ReactViewGroup(context) {
         )
     }
 
-    var infoWindow: ReactViewGroup? = null
+    var infoWindow: AMapOverlay? = null
     var infoWindowEnabled: Boolean = true
 
     var marker: Marker? = null

android/src/main/java/cn/qiuxiang/react/amap3d/AMapMarkerManager.kt

@@ -18,9 +18,11 @@ internal class AMapMarkerManager : ViewGroupManager<AMapMarker>() {
     }
 
     override fun addView(marker: AMapMarker, view: View, index: Int) {
-        when (view) {
-            is AMapInfoWindow -> marker.infoWindow = view
-            is AMapOverlay -> marker.setIconView(view)
+        if (view is AMapOverlay) {
+            when(index) {
+                0 -> marker.setIconView(view)
+                1 -> marker.infoWindow = view
+            }
         }
     }
 

android/src/main/java/cn/qiuxiang/react/amap3d/AMapView.kt

@@ -85,7 +85,7 @@ class AMapView(context: ThemedReactContext) : MapView(context) {
             emit(polylines[polyline.id]?.id, "onPolylineClick")
         }
 
-        map.setInfoWindowAdapter(AMapInfoWindowAdapter(context, markers))
+        map.setInfoWindowAdapter(InfoWindowAdapter(context, markers))
     }
 
     fun addMarker(marker: AMapMarker) {

android/src/main/java/cn/qiuxiang/react/amap3d/AMapInfoWindowAdapter.kt → android/src/main/java/cn/qiuxiang/react/amap3d/InfoWindowAdapter.kt

@@ -8,7 +8,7 @@ import android.widget.TextView
 import com.amap.api.maps.AMap
 import com.amap.api.maps.model.Marker
 
-class AMapInfoWindowAdapter(
+class InfoWindowAdapter(
         val context: Context,
         val markers: HashMap<String, AMapMarker>
 ) : AMap.InfoWindowAdapter {

components/InfoWindow.js

-import React, {PropTypes, Component} from 'react'
-import {requireNativeComponent, View} from 'react-native'
-
-class InfoWindow extends Component {
-  static propTypes = {
-    ...View.propTypes,
-  }
-
-  render() {
-    return <AMapInfoWindow {...this.props}/>
-  }
-}
-
-AMapInfoWindow = requireNativeComponent('AMapInfoWindow', InfoWindow)
-
-export default InfoWindow

example/src/examples.js

@@ -34,7 +34,7 @@ export default class Examples extends Component {
       <View style={styles.group}>
         {this._renderItem('地图模式', 'MapTypes')}
         <View style={styles.separator}/>
-        {this._renderItem('图层功能', 'Layers')}
+        {this._renderItem('基本图层', 'Layers')}
         <View style={styles.separator}/>
         {this._renderItem('室内地图', 'Indoor')}
         <View style={styles.separator}/>

example/src/examples/marker.js

 import React, {Component} from 'react'
-import {StyleSheet, Alert, Text, Image} from 'react-native'
-import {MapView, Marker, InfoWindow, Overlay} from 'react-native-amap3d'
+import {StyleSheet, Alert, Text, Image, View} from 'react-native'
+import {MapView, Marker} from 'react-native-amap3d'
 
 export default class MarkerExample extends Component {
   static navigationOptions = {
@@ -45,15 +45,15 @@ export default class MarkerExample extends Component {
           latitude: 39.806901,
           longitude: 116.297972,
         }}>
-        <InfoWindow style={styles.customInfoWindow}>
+        <View style={styles.customInfoWindow}>
           <Text>Custom View InfoWindow</Text>
-        </InfoWindow>
+        </View>
       </Marker>
       <Marker
         icon={() =>
-          <Overlay style={styles.customIcon}>
+          <View style={styles.customIcon}>
             <Image style={styles.customIcon} source={require('../../images/marker.png')}/>
-          </Overlay>
+          </View>
         }
         title='自定义图片'
         description="Note the use of nativeOnly above. Sometimes you'll have some special properties that you need to expose for the native component, but don't actually want them as part of the API for the associated React component."
@@ -65,9 +65,9 @@ export default class MarkerExample extends Component {
       <Marker
         title='Custom View Marker'
         icon={() =>
-          <Overlay style={styles.customMarker}>
+          <View style={styles.customMarker}>
             <Text style={styles.markerText}>{this.state.time.toLocaleTimeString()}</Text>
-          </Overlay>
+          </View>
         }
         coordinate={{
           latitude: 39.706901,
@@ -85,7 +85,6 @@ const styles = StyleSheet.create({
   },
   customInfoWindow: {
     backgroundColor: '#8bc34a',
-    position: 'absolute',
     padding: 10,
     borderRadius: 10,
     elevation: 4,
@@ -93,7 +92,6 @@ const styles = StyleSheet.create({
     borderColor: '#689F38',
   },
   customMarker: {
-    position: 'absolute',
     backgroundColor: '#009688',
     alignItems: 'center',
     borderRadius: 5,

ios/AMapMarker.m

@@ -85,11 +85,15 @@
 
 - (void)insertReactSubview:(id <RCTComponent>)subview atIndex:(NSInteger)atIndex {
     if ([subview isKindOfClass:[AMapOverlay class]]) {
-        _overlay = (AMapOverlay *) subview;
-        _overlay.delegate = self;
-        _annotationView.image = nil;
-    } else {
-        _annotationView.customCalloutView = [[MACustomCalloutView alloc] initWithCustomView:(id) subview];
+        if (atIndex == 0) {
+            _overlay = (AMapOverlay *) subview;
+            _overlay.delegate = self;
+            _annotationView.image = nil;
+        }
+        if (atIndex == 1) {
+            // TODO: customCalloutView 的位置不太对
+            _annotationView.customCalloutView = [[MACustomCalloutView alloc] initWithCustomView:(id) subview];
+        }
     }
 }