优化 Marker

README.md

@@ -131,14 +131,10 @@ import MapView from 'react-native-amap3d'
 </MapView>
 ```
 
-### 自定义地图标记及信息窗体
+### 自定义标记图片及信息窗体
 ```jsx
 <Marker
-  icon={() =>
-    <View style={styles.customMarker}>
-      <Image style={styles.customIcon} source={require('marker.png')}/>
-    </View>
-  }
+  image='flag'
   coordinate={{
     latitude: 39.706901,
     longitude: 116.397972,

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

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

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

@@ -3,6 +3,7 @@ package cn.qiuxiang.react.amap3d.maps
 import android.content.Context
 import android.graphics.Bitmap
 import android.graphics.Canvas
+import android.view.View
 import com.amap.api.maps.AMap
 import com.amap.api.maps.model.*
 import com.facebook.react.views.view.ReactViewGroup
@@ -23,6 +24,7 @@ class AMapMarker(context: Context) : ReactViewGroup(context), AMapOverlay {
         )
     }
 
+    private var icon: View? = null
     private var bitmapDescriptor: BitmapDescriptor? = null
     var infoWindow: AMapInfoWindow? = null
 
@@ -93,10 +95,10 @@ class AMapMarker(context: Context) : ReactViewGroup(context), AMapOverlay {
             }
         }
 
-    var icon: AMapMarkerIcon? = null
-        set(value) {
-            field = value
-            value?.addOnLayoutChangeListener { _, _, _, _, _, _, _, _, _ -> updateIcon() }
+    override fun addView(child: View, index: Int) {
+        super.addView(child, index)
+        icon = child
+        icon?.addOnLayoutChangeListener { _, _, _, _, _, _, _, _, _ -> updateIcon() }
     }
 
     override fun add(map: AMap) {

android/src/main/java/cn/qiuxiang/react/amap3d/maps/AMapMarkerIcon.kt

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

android/src/main/java/cn/qiuxiang/react/amap3d/maps/AMapMarkerIconManager.kt

-package cn.qiuxiang.react.amap3d.maps
-
-import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.uimanager.ViewGroupManager
-
-class AMapMarkerIconManager : ViewGroupManager<AMapMarkerIcon>() {
-    override fun getName(): String {
-        return "AMapOverlay"
-    }
-
-    override fun createViewInstance(reactContext: ThemedReactContext): AMapMarkerIcon {
-        return AMapMarkerIcon(reactContext)
-    }
-}

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

@@ -20,8 +20,8 @@ internal class AMapMarkerManager : ViewGroupManager<AMapMarker>() {
 
     override fun addView(marker: AMapMarker, view: View, index: Int) {
         when (view) {
-            is AMapMarkerIcon -> marker.icon = view
             is AMapInfoWindow -> marker.infoWindow = view
+            else -> super.addView(marker, view, index)
         }
     }
 

components/maps/Marker.js

 import React, {PropTypes} from 'react'
-import {Platform, requireNativeComponent, StyleSheet, ViewPropTypes} from 'react-native'
-import Overlay from './Overlay'
+import {Platform, requireNativeComponent, StyleSheet, View, ViewPropTypes} from 'react-native'
 import InfoWindow from './InfoWindow'
 import {LatLng} from '../PropTypes'
 import BaseComponent from '../BaseComponent'
@@ -128,7 +127,7 @@ export default class Marker extends BaseComponent {
 
   _renderCustomMarker(icon) {
     if (icon) {
-      this._icon = <Overlay style={style.overlay}>{icon()}</Overlay>
+      this._icon = <View style={style.overlay}>{icon()}</View>
       return this._icon
     }
   }

components/maps/Overlay.js

-import {requireNativeComponent, ViewPropTypes} from 'react-native'
-
-/**
- * 用于自定义标记
- */
-export default requireNativeComponent('AMapOverlay', {
-  propTypes: {
-    ...ViewPropTypes,
-  }
-})

example/src/examples/marker.js

 import React, {Component} from 'react'
-import {Alert, Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {Alert, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {MapView, Marker} from 'react-native-amap3d'
 
 export default class MarkerExample extends Component {
@@ -52,7 +52,8 @@ export default class MarkerExample extends Component {
       <Marker
         active
         draggable
-        title={'一个可拖拽的标记 ' + this.state.time.toLocaleTimeString()}
+        title='一个可拖拽的标记 '
+        description={this.state.time.toLocaleTimeString()}
         onDragEnd={this._onDragEvent}
         onInfoWindowPress={this._onInfoWindowPress}
         coordinate={this._coordinates[0]}
@@ -62,18 +63,18 @@ export default class MarkerExample extends Component {
         coordinate={this._coordinates[1]}>
         <TouchableOpacity activeOpacity={0.9} onPress={this._onCustomInfoWindowPress}>
           <View style={styles.customInfoWindow}>
-            <Text>Custom View InfoWindow</Text>
+            <Text>自定义信息窗口</Text>
+            <Text>{this.state.time.toLocaleTimeString()}</Text>
           </View>
         </TouchableOpacity>
       </Marker>
       <Marker
         image='flag'
         title='自定义图片'
-        description="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."
         coordinate={this._coordinates[2]}
       />
       <Marker
-        title='自定义标记'
+        title='自定义 View'
         icon={() =>
           <View style={styles.customMarker}>
             <Text style={styles.markerText}>{this.state.time.toLocaleTimeString()}</Text>
@@ -97,6 +98,7 @@ const styles = StyleSheet.create({
     elevation: 4,
     borderWidth: 2,
     borderColor: '#689F38',
+    marginBottom: 5,
   },
   customMarker: {
     backgroundColor: '#009688',

ios/AMapMarker.m

 #import <React/UIView+React.h>
 #import "AMapMarker.h"
-#import "AMapOverlay.h"
 
 #pragma ide diagnostic ignored "OCUnusedMethodInspection"
 
@@ -119,10 +118,6 @@
 }
 
 - (void)insertReactSubview:(id <RCTComponent>)subview atIndex:(NSInteger)atIndex {
-    if ([subview isKindOfClass:[AMapOverlay class]] && subview.reactSubviews.count > 0) {
-        [super insertReactSubview:subview atIndex:atIndex];
-    }
-
     if ([subview isKindOfClass:[AMapInfoWindow class]]) {
         _callout = (AMapInfoWindow *) subview;
         _callout.delegate = self;
@@ -132,6 +127,8 @@
 
         _calloutView = [[MACustomCalloutView alloc] initWithCustomView:button];
         self.customCalloutView = _calloutView;
+    } else {
+        [super insertReactSubview:subview atIndex:atIndex];
     }
 }
 

ios/AMapOverlay.h

-#import <React/RCTView.h>
-
-@interface AMapOverlay : RCTView
-@end

ios/AMapOverlay.m

-#import <React/UIView+React.h>
-#import "AMapOverlay.h"
-
-@implementation AMapOverlay {
-}
-
-@end

ios/AMapOverlayManager.m

-#import <React/RCTUIManager.h>
-#import "AMapOverlay.h"
-
-#pragma ide diagnostic ignored "OCUnusedClassInspection"
-
-@interface AMapOverlayManager : RCTViewManager
-@end
-
-@implementation AMapOverlayManager {
-}
-
-RCT_EXPORT_MODULE()
-
-- (UIView *)view {
-    return [AMapOverlay new];
-}
-
-@end

package.json

 {
   "name": "react-native-amap3d",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "react-native 高德地图组件",
   "author": "Qiu Xiang <i@7c00.cc>",
   "license": "MIT",