实现事件监听接口

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

 package cn.qiuxiang.react.amap3d;
 
-import android.content.Context;
+import android.annotation.SuppressLint;
 
 import com.amap.api.maps.AMap;
 import com.amap.api.maps.model.BitmapDescriptor;
@@ -18,11 +18,15 @@ import com.facebook.imagepipeline.image.CloseableImage;
 import com.facebook.imagepipeline.image.CloseableStaticBitmap;
 import com.facebook.imagepipeline.request.ImageRequest;
 import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
 import com.facebook.react.views.view.ReactViewGroup;
 
 import java.util.HashMap;
 import java.util.Map;
 
+@SuppressLint("ViewConstructor")
 public class AMapMarker extends ReactViewGroup {
     private static final Map<String, Float> COLORS;
 
@@ -71,14 +75,21 @@ public class AMapMarker extends ReactViewGroup {
                 }
             };
 
-    public AMapMarker(Context context) {
+    private RCTEventEmitter eventEmitter;
+
+    public AMapMarker(ThemedReactContext context) {
         super(context);
+        eventEmitter = context.getJSModule(RCTEventEmitter.class);
     }
 
     public void addToMap(AMap map) {
         marker = map.addMarker(getMarkerOptions());
     }
 
+    public String getMarkerId() {
+        return marker.getId();
+    }
+
     private MarkerOptions getMarkerOptions() {
         return new MarkerOptions()
                 .setFlat(flat)
@@ -144,4 +155,8 @@ public class AMapMarker extends ReactViewGroup {
             dataSource.subscribe(dataSubscriber, CallerThreadExecutor.getInstance());
         }
     }
+
+    public void sendEvent(String name, WritableMap data) {
+        eventEmitter.receiveEvent(getId(), name, data);
+    }
 }

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

 package cn.qiuxiang.react.amap3d;
 
 import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.common.MapBuilder;
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.annotations.ReactProp;
 
+import java.util.HashMap;
+import java.util.Map;
+
 class AMapMarkerManager extends SimpleViewManager<AMapMarker> {
     @Override
     public String getName() {
@@ -16,6 +20,13 @@ class AMapMarkerManager extends SimpleViewManager<AMapMarker> {
         return new AMapMarker(reactContext);
     }
 
+    @Override
+    public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
+        HashMap<String, Object> map = new HashMap<>();
+        map.put("onMarkerClick", MapBuilder.of("registrationName", "onMarkerClick"));
+        return map;
+    }
+
     @ReactProp(name = "title")
     public void setTitle(AMapMarker marker, String title) {
         marker.setTitle(title);

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

 package cn.qiuxiang.react.amap3d;
 
-import android.content.Context;
-import android.graphics.Color;
+import android.annotation.SuppressLint;
+import android.location.Location;
 
 import com.amap.api.maps.AMap;
 import com.amap.api.maps.MapView;
 import com.amap.api.maps.UiSettings;
+import com.amap.api.maps.model.LatLng;
+import com.amap.api.maps.model.Marker;
 import com.amap.api.maps.model.MyLocationStyle;
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
 
+import java.util.HashMap;
+import java.util.Map;
+
+@SuppressLint("ViewConstructor")
 public class AMapView extends MapView {
     public final AMap map;
     public final UiSettings ui;
-    public final MyLocationStyle locationStyle;
+    private final RCTEventEmitter eventEmitter;
+    private Map<String, AMapMarker> markers = new HashMap<>();
 
-    public AMapView(Context context) {
+    public AMapView(final ThemedReactContext context) {
         super(context);
         super.onCreate(null);
         map = this.getMap();
         ui = map.getUiSettings();
-        locationStyle = new MyLocationStyle();
+        eventEmitter = context.getJSModule(RCTEventEmitter.class);
+
+        // 设置默认的定位模式
+        MyLocationStyle locationStyle = new MyLocationStyle();
         locationStyle.myLocationType(MyLocationStyle.LOCATION_TYPE_LOCATION_ROTATE_NO_CENTER);
         map.setMyLocationStyle(locationStyle);
+
+        map.setOnMapLoadedListener(new AMap.OnMapLoadedListener() {
+            @Override
+            public void onMapLoaded() {
+                sendEvent("onMapLoaded", Arguments.createMap());
+            }
+        });
+
+        map.setOnMapClickListener(new AMap.OnMapClickListener() {
+            @Override
+            public void onMapClick(LatLng latLng) {
+                WritableMap event = Arguments.createMap();
+                event.putDouble("latitude", latLng.latitude);
+                event.putDouble("longitude", latLng.longitude);
+                sendEvent("onMapClick", event);
+            }
+        });
+
+        map.setOnMapLongClickListener(new AMap.OnMapLongClickListener() {
+            @Override
+            public void onMapLongClick(LatLng latLng) {
+                WritableMap event = Arguments.createMap();
+                event.putDouble("latitude", latLng.latitude);
+                event.putDouble("longitude", latLng.longitude);
+                sendEvent("onMapLongClick", event);
+            }
+        });
+
+        map.setOnMyLocationChangeListener(new AMap.OnMyLocationChangeListener() {
+            @Override
+            public void onMyLocationChange(Location location) {
+                WritableMap event = Arguments.createMap();
+                event.putDouble("latitude", location.getLatitude());
+                event.putDouble("longitude", location.getLongitude());
+                event.putDouble("accuracy", location.getAccuracy());
+                sendEvent("onLocationChange", event);
+            }
+        });
+
+        map.setOnMarkerClickListener(new AMap.OnMarkerClickListener() {
+            @Override
+            public boolean onMarkerClick(Marker marker) {
+                markers.get(marker.getId()).sendEvent("onMarkerClick", Arguments.createMap());
+                return false;
+            }
+        });
+    }
+
+    public void addMarker(AMapMarker marker) {
+        marker.addToMap(map);
+        markers.put(marker.getMarkerId(), marker);
+    }
+
+    public void sendEvent(String name, WritableMap data) {
+        eventEmitter.receiveEvent(getId(), name, data);
     }
 }

android/src/main/java/cn/qiuxiang/react/amap3d/AMapViewManager.java

@@ -11,6 +11,7 @@ import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.ViewGroupManager;
 import com.facebook.react.uimanager.annotations.ReactProp;
 
+import java.util.HashMap;
 import java.util.Map;
 
 class AMapViewManager extends ViewGroupManager<AMapView> {
@@ -29,8 +30,7 @@ class AMapViewManager extends ViewGroupManager<AMapView> {
     @Override
     public void addView(AMapView mapView, View child, int index) {
         if (child instanceof AMapMarker) {
-            AMapMarker marker = (AMapMarker) child;
-            marker.addToMap(mapView.map);
+            mapView.addMarker((AMapMarker) child);
         }
     }
 
@@ -39,6 +39,16 @@ class AMapViewManager extends ViewGroupManager<AMapView> {
         return new AMapView(reactContext);
     }
 
+    @Override
+    public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
+        HashMap<String, Object> map = new HashMap<>();
+        map.put("onMapLoaded", MapBuilder.of("registrationName", "onReady"));
+        map.put("onMapClick", MapBuilder.of("registrationName", "onPress"));
+        map.put("onMapLongClick", MapBuilder.of("registrationName", "onLongPress"));
+        map.put("onLocationChange", MapBuilder.of("registrationName", "onLocation"));
+        return map;
+    }
+
     @ReactProp(name = "locationEnabled")
     public void setMyLocationEnabled(AMapView view, boolean enabled) {
         view.map.setMyLocationEnabled(enabled);

components/MapView.js

@@ -115,6 +115,26 @@ class MapView extends Component {
      * 是否启用倾斜手势，用于改变视角
      */
     tiltEnabled: PropTypes.bool,
+
+    /**
+     * 地图加载完毕事件
+     */
+    onReady: React.PropTypes.func,
+
+    /**
+     * 点击事件
+     */
+    onPress: React.PropTypes.func,
+
+    /**
+     * 长按事件
+     */
+    onLongPress: React.PropTypes.func,
+
+    /**
+     * 定位事件
+     */
+    onLocation: React.PropTypes.func,
   }
 
   render() {

components/Marker.js

 import React, {PropTypes, Component} from 'react'
 import {requireNativeComponent, View} from 'react-native'
 import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'
-import merge from 'merge'
 import {CoordinatePropType} from './PropTypes'
 
 class Marker extends Component {
@@ -51,18 +50,27 @@ class Marker extends Component {
      * 层级
      */
     zIndex: PropTypes.number,
+
+    onPress: React.PropTypes.func,
+  }
+
+  _eventHandler(name) {
+    return event => {
+      if (this.props[name]) {
+        this.props[name](event)
+      }
+    }
   }
 
   render() {
-    if (this.props.image) {
-      let image = this.props.image
-      if (typeof this.props.image === 'number') {
-        image = resolveAssetSource(this.props.image).uri
+    const props = {
+      ...this.props,
+      onMarkerClick: this._eventHandler('onPress'),
     }
-      return <AMapMarker {...this.props} image={image}/>
-    } else {
-      return <AMapMarker {...this.props}/>
+    if (typeof props.image === 'number') {
+      props.image = resolveAssetSource(this.props.image).uri
     }
+    return <AMapMarker {...props}/>
   }
 }
 

example/android/app/src/main/AndroidManifest.xml

@@ -16,6 +16,7 @@
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
     <!--允许程序访问WiFi网络信息-->
     <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
+    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
     <!--允许程序读写手机状态和身份-->
     <uses-permission android:name="android.permission.READ_PHONE_STATE" />
     <!--允许程序访问CellID或WiFi热点来获取粗略的位置-->
@@ -44,7 +45,7 @@
       <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
         <meta-data
             android:name="com.amap.api.v2.apikey"
-            android:value="f5010319a1b18b0b1221c77d45caae69" />
+            android:value="3bb9e200c9ec35643b217957c593c214" />
     </application>
 
 </manifest>