Marker 新增 color、image 接口，原 props.icon 现只用于自定义 view

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

@@ -23,6 +23,7 @@ class AMapMarker(context: Context) : ReactViewGroup(context), AMapOverlay {
         )
     }
 
+    private var bitmapDescriptor: BitmapDescriptor? = null
     var infoWindow: AMapInfoWindow? = null
 
     var infoWindowEnabled: Boolean = true
@@ -92,14 +93,12 @@ class AMapMarker(context: Context) : ReactViewGroup(context), AMapOverlay {
             }
         }
 
-    var customIcon: AMapMarkerIcon? = null
+    var icon: AMapMarkerIcon? = null
         set(value) {
             field = value
-            value?.addOnLayoutChangeListener { _, _, _, _, _, _, _, _, _ -> updateCustomIcon() }
+            value?.addOnLayoutChangeListener { _, _, _, _, _, _, _, _, _ -> updateIcon() }
         }
 
-    private var bitmapDescriptor: BitmapDescriptor? = null
-
     override fun add(map: AMap) {
         marker = map.addMarker(MarkerOptions()
                 .setFlat(flat)
@@ -132,8 +131,8 @@ class AMapMarker(context: Context) : ReactViewGroup(context), AMapOverlay {
         marker?.setIcon(bitmapDescriptor)
     }
 
-    fun updateCustomIcon() {
-        customIcon?.let {
+    fun updateIcon() {
+        icon?.let {
             val bitmap = Bitmap.createBitmap(
                     it.width, it.height, Bitmap.Config.ARGB_8888)
             it.draw(Canvas(bitmap))
@@ -141,4 +140,10 @@ class AMapMarker(context: Context) : ReactViewGroup(context), AMapOverlay {
             marker?.setIcon(bitmapDescriptor)
         }
     }
+
+    fun setImage(name: String) {
+        val drawable = context.resources.getIdentifier(name, "drawable", context.packageName)
+        bitmapDescriptor = BitmapDescriptorFactory.fromResource(drawable)
+        marker?.setIcon(bitmapDescriptor)
+    }
 }

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

@@ -20,7 +20,7 @@ internal class AMapMarkerManager : ViewGroupManager<AMapMarker>() {
 
     override fun addView(marker: AMapMarker, view: View, index: Int) {
         when (view) {
-            is AMapMarkerIcon -> marker.customIcon = view
+            is AMapMarkerIcon -> marker.icon = view
             is AMapInfoWindow -> marker.infoWindow = view
         }
     }
@@ -45,7 +45,7 @@ internal class AMapMarkerManager : ViewGroupManager<AMapMarker>() {
 
     override fun receiveCommand(marker: AMapMarker, commandId: Int, args: ReadableArray?) {
         when (commandId) {
-            UPDATE -> marker.updateCustomIcon()
+            UPDATE -> marker.updateIcon()
         }
     }
 
@@ -91,11 +91,16 @@ internal class AMapMarkerManager : ViewGroupManager<AMapMarker>() {
         marker.active = active
     }
 
-    @ReactProp(name = "icon")
+    @ReactProp(name = "color")
     fun setIcon(marker: AMapMarker, icon: String) {
         marker.setIconColor(icon)
     }
 
+    @ReactProp(name = "image")
+    fun setImage(marker: AMapMarker, image: String) {
+        marker.setImage(image)
+    }
+
     @ReactProp(name = "infoWindowEnabled")
     fun setEnabledInfoWindow(marker: AMapMarker, enabled: Boolean) {
         marker.infoWindowEnabled = enabled

components/maps/Marker.js

 import React, {PropTypes} from 'react'
-import {Platform, requireNativeComponent, StyleSheet, View, ViewPropTypes} from 'react-native'
+import {Platform, requireNativeComponent, StyleSheet, ViewPropTypes} from 'react-native'
 import Overlay from './Overlay'
 import InfoWindow from './InfoWindow'
 import {LatLng} from '../PropTypes'
@@ -24,31 +24,38 @@ export default class Marker extends BaseComponent {
      */
     description: PropTypes.string,
 
+    /**
+     * 默认图标颜色
+     */
+    color: Platform.select({
+      android: PropTypes.oneOf([
+        'azure',
+        'blue',
+        'cyan',
+        'green',
+        'magenta',
+        'orange',
+        'red',
+        'rose',
+        'violet',
+        'yellow',
+      ]),
+      ios: PropTypes.oneOf([
+        'red',
+        'green',
+        'purple',
+      ]),
+    }),
+
     /**
      * 自定义图标
      */
-    icon: PropTypes.oneOfType([
-      Platform.select({
-        android: PropTypes.oneOf([
-          'azure',
-          'blue',
-          'cyan',
-          'green',
-          'magenta',
-          'orange',
-          'red',
-          'rose',
-          'violet',
-          'yellow',
-        ]),
-        ios: PropTypes.oneOf([
-          'red',
-          'green',
-          'purple',
-        ]),
-      }),
-      PropTypes.func,
-    ]),
+    icon: PropTypes.func,
+
+    /**
+     * 自定义图片
+     */
+    image: PropTypes.string,
 
     /**
      * 透明度 [0, 1]
@@ -119,23 +126,23 @@ export default class Marker extends BaseComponent {
     }
   }
 
+  _renderCustomMarker(icon) {
+    if (icon) {
+      this._icon = <Overlay style={style.overlay}>{icon()}</Overlay>
+      return this._icon
+    }
+  }
+
   componentDidUpdate() {
-    if (this._customMarker && Platform.OS === 'android') {
+    if (this._icon && Platform.OS === 'android') {
       setTimeout(() => this._sendCommand('update'), 0)
     }
   }
 
   render() {
-    const props = {...this.props}
-
-    if (typeof props.icon === 'function') {
-      this._customMarker = <Overlay style={style.overlay}>{props.icon()}</Overlay>
-      delete props.icon
-    }
-
-    return <AMapMarker {...props}>
-      {this._customMarker}
-      {this._renderInfoWindow(props.children)}
+    return <AMapMarker {...this.props}>
+      {this._renderCustomMarker(this.props.icon)}
+      {this._renderInfoWindow(this.props.children)}
     </AMapMarker>
   }
 

example/ios/RNAMap3D/Images.xcassets/AppIcon.appiconset/Contents.json

 {
   "images" : [
+    {
+      "idiom" : "iphone",
+      "size" : "20x20",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "20x20",
+      "scale" : "3x"
+    },
     {
       "idiom" : "iphone",
       "size" : "29x29",
@@ -29,6 +39,11 @@
       "idiom" : "iphone",
       "size" : "60x60",
       "scale" : "3x"
+    },
+    {
+      "idiom" : "ios-marketing",
+      "size" : "1024x1024",
+      "scale" : "1x"
     }
   ],
   "info" : {

example/ios/RNAMap3D/Images.xcassets/Contents.json

+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file

example/ios/RNAMap3D/Images.xcassets/flag.imageset/Contents.json

+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "flag.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file

example/src/examples/marker.js

@@ -58,7 +58,7 @@ export default class MarkerExample extends Component {
         coordinate={this._coordinates[0]}
       />
       <Marker
-        icon='green'
+        color='green'
         onInfoWindowPress={this._onCustomInfoWindowPress}
         coordinate={this._coordinates[1]}>
         <TouchableOpacity activeOpacity={0.9} onPress={this._onCustomInfoWindowPress}>
@@ -68,11 +68,7 @@ export default class MarkerExample extends Component {
         </TouchableOpacity>
       </Marker>
       <Marker
-        icon={() =>
-          <View style={styles.customIcon}>
-            <Image style={styles.customIcon} source={require('../../images/flag.png')}/>
-          </View>
-        }
+        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]}

example/src/examples/multi-point.js

 import React, {Component} from 'react'
 import {StyleSheet, Alert} from 'react-native'
-import {MapView, MultiPoint, Marker} from 'react-native-amap3d'
+import {MapView, MultiPoint} from 'react-native-amap3d'
 
 export default class MultiPointExample extends Component {
   static navigationOptions = {
@@ -17,7 +17,7 @@ export default class MultiPointExample extends Component {
   render() {
     return <MapView zoomLevel={12} style={StyleSheet.absoluteFill}>
       <MultiPoint
-        image={'icon'}
+        image='point'
         points={this._points}
         onItemPress={this._onItemPress}
       />

ios/AMapMarker.m

@@ -9,6 +9,7 @@
     MAPinAnnotationView *_pinView;
     MAPinAnnotationColor _pinColor;
     MACustomCalloutView *_calloutView;
+    UIImage *_image;
     AMapInfoWindow *_callout;
     AMapView *_mapView;
     BOOL _active;
@@ -39,11 +40,19 @@
     _annotation.title = title;
 }
 
-- (void)setIcon:(MAPinAnnotationColor)color {
+- (void)setColor:(MAPinAnnotationColor)color {
     _pinColor = color;
     _pinView.pinColor = color;
 }
 
+#pragma clang diagnostic ignored "-Woverriding-method-mismatch"
+- (void)setImage:(NSString *)name {
+    _image = [UIImage imageNamed:name];
+    if (_image != nil) {
+        _pinView.image = _image;
+    }
+}
+
 - (void)setDescription:(NSString *)description {
     _annotation.subtitle = description;
 }
@@ -102,6 +111,9 @@
             _pinView.draggable = self.draggable;
             _pinView.pinColor = _pinColor;
             _pinView.customCalloutView = _calloutView;
+            if (_image != nil) {
+                _pinView.image = _image;
+            }
         }
         return _pinView;
     } else {

ios/AMapMarkerManager.m

@@ -23,7 +23,8 @@ RCT_EXPORT_VIEW_PROPERTY(draggable, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(clickable, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(infoWindowEnabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(zIndex, NSInteger)
-RCT_EXPORT_VIEW_PROPERTY(icon, MAPinAnnotationColor)
+RCT_EXPORT_VIEW_PROPERTY(color, MAPinAnnotationColor)
+RCT_EXPORT_VIEW_PROPERTY(image, NSString)
 
 RCT_EXPORT_VIEW_PROPERTY(onPress, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onInfoWindowPress, RCTBubblingEventBlock)