Add MapView#region，Close #50

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

@@ -185,15 +185,12 @@ class AMapView(context: Context) : TextureMapView(context) {
         map.animateCamera(cameraUpdate, duration.toLong(), animateCallback)
     }
 
-    fun setLimitRegion(limitRegion: ReadableMap) {
-        val latitude = limitRegion.getDouble("latitude")
-        val longitude = limitRegion.getDouble("longitude")
-        val latitudeDelta = limitRegion.getDouble("latitudeDelta")
-        val longitudeDelta = limitRegion.getDouble("longitudeDelta")
-        map.setMapStatusLimits(LatLngBounds(
-                LatLng(latitude - latitudeDelta / 2, longitude - longitudeDelta / 2),
-                LatLng(latitude + latitudeDelta / 2, longitude + longitudeDelta / 2)
-        ))
+    fun setRegion(region: ReadableMap) {
+        map.moveCamera(CameraUpdateFactory.newLatLngBounds(latLngBoundsFromReadableMap(region), 0))
+    }
+
+    fun setLimitRegion(region: ReadableMap) {
+        map.setMapStatusLimits(latLngBoundsFromReadableMap(region))
     }
 
     fun setLocationEnabled(enabled: Boolean) {
@@ -205,4 +202,15 @@ class AMapView(context: Context) : TextureMapView(context) {
         locationStyle.interval(interval)
         map.myLocationStyle = locationStyle
     }
+
+    private fun latLngBoundsFromReadableMap(region: ReadableMap): LatLngBounds {
+        val latitude = region.getDouble("latitude")
+        val longitude = region.getDouble("longitude")
+        val latitudeDelta = region.getDouble("latitudeDelta")
+        val longitudeDelta = region.getDouble("longitudeDelta")
+        return LatLngBounds(
+                LatLng(latitude - latitudeDelta / 2, longitude - longitudeDelta / 2),
+                LatLng(latitude + latitudeDelta / 2, longitude + longitudeDelta / 2)
+        )
+    }
 }

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

@@ -164,6 +164,11 @@ internal class AMapViewManager : ViewGroupManager<AMapView>() {
                 coordinate.getDouble("longitude"))))
     }
 
+    @ReactProp(name = "region")
+    fun setRegion(view: AMapView, region: ReadableMap) {
+        view.setRegion(region)
+    }
+
     @ReactProp(name = "limitRegion")
     fun setLimitRegion(view: AMapView, limitRegion: ReadableMap) {
         view.setLimitRegion(limitRegion)

components/maps/MapView.js

@@ -116,6 +116,11 @@ export default class MapView extends BaseComponent {
      */
     coordinate: LatLng,
 
+    /**
+     * 显示区域
+     */
+    region: Region,
+
     /**
      * 限制地图只能显示某个矩形区域
      */

ios/AMapView.h

@@ -8,4 +8,7 @@
 @property(nonatomic, copy) RCTBubblingEventBlock onStatusChange;
 @property(nonatomic, copy) RCTBubblingEventBlock onStatusChangeComplete;
 
+@property(nonatomic) BOOL loaded;
+@property(nonatomic) MACoordinateRegion initialRegion;
+
 @end
\ No newline at end of file

ios/AMapView.m

@@ -9,27 +9,36 @@
 }
 
 - (void)setShowsTraffic:(BOOL)shows {
-    super.showTraffic = shows;
+    self.showTraffic = shows;
 }
 
 - (void)setTiltEnabled:(BOOL)enabled {
-    super.rotateCameraEnabled = enabled;
+    self.rotateCameraEnabled = enabled;
 }
 
 - (void)setLocationEnabled:(BOOL)enabled {
-    super.showsUserLocation = enabled;
+    self.showsUserLocation = enabled;
 }
 
 - (void)setCoordinate:(CLLocationCoordinate2D)json {
-    super.centerCoordinate = json;
+    self.centerCoordinate = json;
 }
 
 - (void)setTilt:(CGFloat)degree {
-    super.cameraDegree = degree;
+    self.cameraDegree = degree;
 }
 
 - (void)setRotation:(CGFloat)degree {
-    super.rotationDegree = degree;
+    self.rotationDegree = degree;
+}
+
+// 不能直接 setRegion，因为如果地图未加载 setRegion 是无效的
+- (void)setRegion:(MACoordinateRegion)region {
+    if (self.loaded) {
+        super.region = region;
+    } else {
+        self.initialRegion = region;
+    }
 }
 
 - (void)insertReactSubview:(id <RCTComponent>)subview atIndex:(NSInteger)atIndex {

ios/AMapViewManager.m

@@ -40,6 +40,7 @@ RCT_EXPORT_VIEW_PROPERTY(tiltEnabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(mapType, MAMapType)
 RCT_EXPORT_VIEW_PROPERTY(coordinate, CLLocationCoordinate2D)
 RCT_EXPORT_VIEW_PROPERTY(limitRegion, MACoordinateRegion)
+RCT_EXPORT_VIEW_PROPERTY(region, MACoordinateRegion)
 RCT_EXPORT_VIEW_PROPERTY(tilt, CGFloat)
 RCT_EXPORT_VIEW_PROPERTY(rotation, CGFloat)
 RCT_EXPORT_VIEW_PROPERTY(distanceFilter, CLLocationDistance)
@@ -189,4 +190,14 @@ RCT_EXPORT_METHOD(animateTo:(nonnull NSNumber *)reactTag params:(NSDictionary *)
     }
 }
 
+- (void)mapInitComplete:(AMapView *)mapView {
+    mapView.loaded = YES;
+
+    // struct 里的值会被初始化为 0，这里以此作为条件，判断 initialRegion 是否被设置过
+    // 但实际上经度为 0 是一个合法的坐标（赤道），只是考虑到高德地图只在中国使用，就这样吧
+    if (mapView.initialRegion.center.latitude != 0) {
+        mapView.region = mapView.initialRegion;
+    }
+}
+
 @end

package.json

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