react native android 高德地图原生代码编写

android代码

MyAmapView

高德地图注意事项

• key授权失败
  请注意包含高德key的meta-data标签是否被包含在application标签中
• 高德地图无法显示
  
  1. 先查看一下rn中地图view是否占了位置没有显示,设置rn中的view的背景颜色可查看,rnview的大小设置没.如果占了位置,检查是否调用mapView.onCreate();
  2. 使用frameLayout请检查是否调用this.addView()
• 以下就是部分代码

代码

因为公司原因,贴出部分代码,有需要的可以直接从里面拷贝一些代码来用

package com.aiyunbao.aMap;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.location.Location;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import com.aiyunbao.R;
import com.aiyunbao.marker.MarkerUtil;
import com.aiyunbao.poi.PoiSearchBiz;
import com.aiyunbao.utils.SensorEventHelper;
import com.amap.api.location.AMapLocationClient;
import com.amap.api.location.AMapLocationClientOption;
import com.amap.api.maps.AMap;
import com.amap.api.maps.CameraUpdate;
import com.amap.api.maps.LocationSource;
import com.amap.api.maps.MapView;
import com.amap.api.maps.UiSettings;
import com.amap.api.maps.model.BitmapDescriptor;
import com.amap.api.maps.model.BitmapDescriptorFactory;
import com.amap.api.maps.model.CameraPosition;
import com.amap.api.maps.model.Circle;
import com.amap.api.maps.model.CircleOptions;
import com.amap.api.maps.model.LatLng;
import com.amap.api.maps.model.Marker;
import com.amap.api.maps.model.MarkerOptions;
import com.amap.api.maps.model.MyLocationStyle;
import com.amap.api.services.core.LatLonPoint;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.uimanager.ThemedReactContext;
import static com.amap.api.maps.AMapOptions.LOGO_POSITION_BOTTOM_RIGHT;
import static com.amap.api.maps.AMapOptions.ZOOM_POSITION_RIGHT_BUTTOM;
/**
* Created by aiyun-pc1 on 2017/5/8.
*/
public class MyAMapView extends FrameLayout implements AMap.OnMyLocationChangeListener, AMap.OnMapClickListener,
AMap.OnMapLongClickListener, AMap.OnCameraChangeListener, AMap.OnMarkerClickListener,
AMap.OnMarkerDragListener, AMap.OnInfoWindowClickListener, AMap.InfoWindowAdapter, LocationSource {
private final ThemedReactContext reactContext;
private final ViewGroup.LayoutParams PARAM;
private MapView MAPVIEW;
private AMap aMap;
private UiSettings mUiSettings;
public AMapLocationClientOption mLocationOption = null;
private AMapLocationClient mlocationClient;
private long startTime;
private OnLocationChangedListener mListener;
private boolean mFirstFix = false;
private static final int STROKE_COLOR = Color.argb(180, 3, 145, 255);
private static final int FILL_COLOR = Color.argb(10, 0, 0, 180);
/**
* 传感器
*/
private SensorEventHelper mSensorHelper;
private Marker mLocMarker;
private Circle mCircle;
/**
* 屏幕中心点的大头针
*/
private Marker screenPosition;
public MyAMapView(ThemedReactContext reactContext) {
super(reactContext);
this.reactContext = reactContext;
PARAM = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
init();
}
public AMap getAmap() {
if (aMap == null) {
aMap = MAPVIEW.getMap();
}
return aMap;
}
/**
* 初始化控件,定位位置
*/
private void init() {
//定位箭头旋转
mSensorHelper = new SensorEventHelper(reactContext);
if (mSensorHelper != null) {
mSensorHelper.registerSensorListener();
}
MAPVIEW = new MapView(reactContext);
MAPVIEW.setLayoutParams(PARAM);
this.addView(MAPVIEW);
MAPVIEW.onCreate(reactContext.getCurrentActivity().getIntent().getExtras());
setUpMap();
}
/**
* 设置一些amap的属性
*/
private void setUpMap() {
aMap = MAPVIEW.getMap();
aMap.setMapType(AMap.MAP_TYPE_NORMAL);// 矢量地图模式
//控件交互
mUiSettings = aMap.getUiSettings();//实例化UiSettings类
mUiSettings.setZoomControlsEnabled(false);//显示缩放按钮
//缩放按钮
右边界中部：ZOOM_POSITION_RIGHT_CENTER 右下：ZOOM_POSITION_RIGHT_BUTTOM。
mUiSettings.setZoomPosition(ZOOM_POSITION_RIGHT_BUTTOM);
//Logo的位置 左下：LOGO_POSITION_BOTTOM_LEFT 底部居中：LOGO_POSITION_BOTTOM_CENTER 右下：LOGO_POSITION_BOTTOM_RIGHT
mUiSettings.setLogoPosition(LOGO_POSITION_BOTTOM_RIGHT);
mUiSettings.setCompassEnabled(false);//指南针
mUiSettings.setZoomGesturesEnabled(true);//手势缩放
mUiSettings.setScaleControlsEnabled(true);//比例尺
//
changeCamera(
//
CameraUpdateFactory.newCameraPosition(new CameraPosition(
//
latLng, ZOOMLEVEL, 30, 0)));//创建view时候传入之前定位到当前坐标位置把地图中心移动过去
//
addLocationMarker(latLng, RADIUS, mLocMarker);
initBluePoint();
initListener();
screenPosition = MarkerUtil.addMarkerInScreenCenter(aMap, "purple_pin", reactContext);
}
private void initListener() {
aMap.setOnMapClickListener(this);// 对amap添加单击地图事件监听器
aMap.setOnMapLongClickListener(this);// 对amap添加长按地图事件监听器
aMap.setOnCameraChangeListener(this);// 对amap添加移动地图事件监听器
aMap.setOnMarkerClickListener(this);// marker点击事件监听器
aMap.setOnMarkerDragListener(this);// 设置marker可拖拽事件监听器
//
aMap.setOnMapLoadedListener(this);// 设置amap加载成功事件监听器
aMap.setOnMarkerClickListener(this);// 设置点击marker事件监听器
aMap.setOnInfoWindowClickListener(this);// 设置点击infoWindow事件监听器
aMap.setInfoWindowAdapter(this);// 设置自定义InfoWindow样式
aMap.setOnMyLocationChangeListener(this);//设置SDK 自带定位消息监听
}
/**
* Activity onResume后调用view的onAttachedToWindow
*/
@Override
protected void onAttachedToWindow() {
//
init();
super.onAttachedToWindow();
}
/**
* view生命周期onDetachedFromWindow
*/
@Override
protected void onDetachedFromWindow() {
this.removeView(MAPVIEW);
MAPVIEW.onDestroy();
super.onDetachedFromWindow();
}
/**
* 对应onResume、对应onPause
*
* @param hasWindowFocus
*/
@Override
public void onWindowFocusChanged(boolean hasWindowFocus) {
super.onWindowFocusChanged(hasWindowFocus);
if (hasWindowFocus) {
//
对应onResume
MAPVIEW.onResume();
} else {
//对应onPause
MAPVIEW.onPause();
}
}
/**
* 定位到设备定位位置
*/
public void startLocation() {
startTime = System.currentTimeMillis();
Log.i("Test", "startTime:" + startTime);
if (mlocationClient == null) {
Log.i("Test", "mlocationClient = null");
mlocationClient = new AMapLocationClient(reactContext);
mLocationOption = new AMapLocationClientOption();
//设置定位监听
//
mlocationClient.setLocationListener(this);
//设置为高精度定位模式
mLocationOption.setLocationMode(AMapLocationClientOption.AMapLocationMode.Hight_Accuracy);
mLocationOption.setOnceLocation(true);
//
mLocationOption.setOnceLocationLatest(true);
mLocationOption.setLocationCacheEnable(true);//定位缓存策略
//
mLocationOption.setInterval(10);
//
mLocationOption.setInterval(3*60*1000);
//设置定位参数
mlocationClient.setLocationOption(mLocationOption);
// 此方法为每隔固定时间会发起一次定位请求，为了减少电量消耗或网络流量消耗，
// 注意设置合适的定位时间的间隔（最小间隔支持为2000ms），并且在合适时间调用stopLocation()方法来取消定位请求
// 在定位结束后，在合适的生命周期调用onDestroy()方法
// 在单次定位情况下，定位无论成功与否，都无需调用stopLocation()方法移除请求，定位sdk内部会移除
}
mlocationClient.startLocation();
}
/**
* 激活定位
*/
@Override
public void activate(OnLocationChangedListener listener) {
mListener = listener;
if (mlocationClient == null) {
mlocationClient = new AMapLocationClient(reactContext);
mLocationOption = new AMapLocationClientOption();
//设置定位监听
//
mlocationClient.setLocationListener(this);
//设置为高精度定位模式
mLocationOption.setLocationMode(AMapLocationClientOption.AMapLocationMode.Hight_Accuracy);
//设置定位参数
mlocationClient.setLocationOption(mLocationOption);
// 此方法为每隔固定时间会发起一次定位请求，为了减少电量消耗或网络流量消耗，
// 注意设置合适的定位时间的间隔（最小间隔支持为2000ms），并且在合适时间调用stopLocation()方法来取消定位请求
// 在定位结束后，在合适的生命周期调用onDestroy()方法
// 在单次定位情况下，定位无论成功与否，都无需调用stopLocation()方法移除请求，定位sdk内部会移除
mlocationClient.startLocation();
}
}
/**
* 停止定位
*/
@Override
public void deactivate() {
mListener = null;
if (mlocationClient != null) {
mlocationClient.stopLocation();
mlocationClient.onDestroy();
}
mlocationClient = null;
}
//
@Override
//
public void onLocationChanged(AMapLocation amapLocation) {
//
if (amapLocation != null) {
//
if (amapLocation.getErrorCode() == 0) {
//
//定位成功回调信息，设置相关消息
//
amapLocation.getLocationType();//获取当前定位结果来源，如网络定位结果，详见定位类型表
//
amapLocation.getLatitude();//获取纬度
//
amapLocation.getLongitude();//获取经度
//
amapLocation.getAccuracy();//获取精度信息
//
SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
//
Date date = new Date(amapLocation.getTime());
//
df.format(date);//定位时间
//
mListener.onLocationChanged(amapLocation);// 显示系统小蓝点
//
//
LatLng location = new LatLng(amapLocation.getLatitude(), amapLocation.getLongitude());
//
if (!mFirstFix) {
//
mFirstFix = true;
//
addCircle(location, amapLocation.getAccuracy());//添加定位精度圆
//
addMarker(location);//添加定位图标
//
mSensorHelper.setCurrentMarker(mLocMarker);//定位图标旋转
//
} else {
//
mCircle.setCenter(location);
//
mCircle.setRadius(amapLocation.getAccuracy());
//
mLocMarker.setPosition(location);
//
}
//
aMap.moveCamera(CameraUpdateFactory.newLatLngZoom(location, 18));
//
} else {
//
//显示错误信息ErrCode是错误码，errInfo是错误信息，详见错误码表。
//
Log.e("定位失败", "location Error, ErrCode:"
//
+ amapLocation.getErrorCode() + ", errInfo:"
//
+ amapLocation.getErrorInfo());
//
}
//
}
//
}
@Override
public void onMyLocationChange(Location location) {
// 定位回调监听
if (location != null) {
Log.e("amap", "onMyLocationChange 定位成功， lat: " + location.getLatitude() + " lon: " + location.getLongitude());
Bundle bundle = location.getExtras();
if (bundle != null) {
int errorCode = bundle.getInt(MyLocationStyle.ERROR_CODE);
String errorInfo = bundle.getString(MyLocationStyle.ERROR_INFO);
// 定位类型，可能为GPS WIFI等，具体可以参考官网的定位SDK介绍
int locationType = bundle.getInt(MyLocationStyle.LOCATION_TYPE);
/*
errorCode
errorInfo
locationType
*/
Log.e("amap", "定位信息， code: " + errorCode + " errorInfo: " + errorInfo + " locationType: " + locationType);
} else {
Log.e("amap", "定位信息， bundle is null ");
}
} else {
Log.e("amap", "定位失败");
}
}
@Deprecated
private void addCircle(LatLng latlng, double radius) {
CircleOptions options = new CircleOptions();
options.strokeWidth(1f);
options.fillColor(FILL_COLOR);
options.strokeColor(STROKE_COLOR);
options.center(latlng);
options.radius(radius);
mCircle = aMap.addCircle(options);
}
@Deprecated
private void addMarker(LatLng latlng) {
if (mLocMarker != null) {
return;
}
Bitmap bMap = BitmapFactory.decodeResource(this.getResources(),
R.drawable.navi_map_gps_locked);
BitmapDescriptor des = BitmapDescriptorFactory.fromBitmap(bMap);
//
BitmapDescriptor des = BitmapDescriptorFactory.fromResource(R.drawable.navi_map_gps_locked);
MarkerOptions options = new MarkerOptions();
options.icon(des);
options.anchor(0.5f, 0.5f);
options.position(latlng);
mLocMarker = aMap.addMarker(options);
mLocMarker.setTitle("我的位置");
}
/**
* 初始化定位的小蓝点
*/
private void initBluePoint() {
MyLocationStyle myLocationStyle = new MyLocationStyle();//初始化定位蓝点样式类
//设置默认定位按钮是否显示，非必需设置。
aMap.getUiSettings().setMyLocationButtonEnabled(true);
// 设置为true表示启动显示定位蓝点，false表示隐藏定位蓝点并不进行定位，默认是false。
// 不知道为什么它会一直回到当前位置
aMap.setMyLocationEnabled(true);
//只定位一次。
//
myLocationStyle.myLocationType(MyLocationStyle.LOCATION_TYPE_SHOW);
//定位一次，且将视角移动到地图中心点。
myLocationStyle.myLocationType(MyLocationStyle.LOCATION_TYPE_LOCATE);
//连续定位、且将视角移动到地图中心点，定位蓝点跟随设备移动。（1秒1次定位）
//
myLocationStyle.myLocationType(MyLocationStyle.LOCATION_TYPE_FOLLOW) ;
//连续定位、且将视角移动到地图中心点，地图依照设备方向旋转，定位点会跟随设备移动。（1秒1次定位）
//
myLocationStyle.myLocationType(MyLocationStyle.LOCATION_TYPE_MAP_ROTATE);
//连续定位、且将视角移动到地图中心点，定位点依照设备方向旋转，并且会跟随设备移动。（1秒1次定位）默认执行此种模式。
//
myLocationStyle.myLocationType(MyLocationStyle.LOCATION_TYPE_LOCATION_ROTATE);
//设置连续定位模式下的定位间隔，只在连续定位模式下生效，单次定位模式下不会生效。单位为毫秒。
myLocationStyle.interval(2000);
// 自定义定位蓝点图标
myLocationStyle.myLocationIcon(BitmapDescriptorFactory.
fromResource(R.drawable.gps_point));
// 自定义精度范围的圆形边框颜色
myLocationStyle.strokeColor(STROKE_COLOR);
//自定义精度范围的圆形边框宽度
myLocationStyle.strokeWidth(5);
// 设置圆形的填充颜色
myLocationStyle.radiusFillColor(FILL_COLOR);
//
myLocationStyle.anchor(float u, float v);//设置定位蓝点图标的锚点方法。
aMap.setMyLocationStyle(myLocationStyle);//设置定位蓝点的Style
}
/**
* 对单击地图事件回调
*/
@Override
public void onMapClick(LatLng point) {
Log.d("tapped, point", point.toString());
WritableMap event = Arguments.createMap();
event.putString("LatLng", point.toString());
}
/**
* 对长按地图事件回调
*/
@Override
public void onMapLongClick(LatLng point) {
Log.d("long pressed, point", point.toString());
}
/**
* 对正在移动地图事件回调
*/
@Override
public void onCameraChange(CameraPosition cameraPosition) {
Log.d("onCameraChange:", cameraPosition.toString());
//大头针跳动动画
MarkerUtil.startJumpAnimation(aMap, screenPosition, reactContext);
LatLonPoint lp = new LatLonPoint(cameraPosition.target.latitude, cameraPosition.target.longitude);
PoiSearchBiz poiSearchBiz = new PoiSearchBiz(reactContext, null);
poiSearchBiz.doSearchQuery("key", "", 3000, 20, lp, null, null);
}
/**
* 对移动地图结束事件回调
*/
@Override
public void onCameraChangeFinish(CameraPosition cameraPosition) {
Log.d("onCameraChangeFinish", cameraPosition.toString());
}
/**
* 根据动画按钮状态，调用函数animateCamera或moveCamera来改变可视区域
*/
public void changeCamera(CameraUpdate update) {
aMap.moveCamera(update);
}
/**
* 对marker标注点点击响应事件
*/
@Override
public boolean onMarkerClick(final Marker marker) {
Log.d("marker标注点点击响应事件", marker.getTitle());
return false;
}
/**
* 监听点击infowindow窗口事件回调
*/
@Override
public void onInfoWindowClick(Marker marker) {
Log.d("监听点击infowindow窗口事件回调", "你点击了infoWindow窗口" + marker.getTitle());
}
/**
* 监听拖动marker时事件回调
*/
@Override
public void onMarkerDrag(Marker marker) {
Log.d(marker.getTitle() + "拖动时当前位置", "(lat,lng)n("
+ marker.getPosition().latitude + ","
+ marker.getPosition().longitude + ")");
}
/**
* 监听拖动marker结束事件回调
*/
@Override
public void onMarkerDragEnd(Marker marker) {
Log.d("监听拖动marker结束事件回调", marker.getTitle() + "停止拖动");
}
/**
* 监听开始拖动marker事件回调
*/
@Override
public void onMarkerDragStart(Marker marker) {
Log.d("监听开始拖动marker事件回调", "开始拖动");
}
/**
* 监听自定义infowindow窗口的infocontents事件回调
*/
@Override
public View getInfoContents(Marker marker) {
return null;
}
/**
* 监听自定义infowindow窗口的infowindow事件回调
*/
@Override
public View getInfoWindow(Marker marker) {
return null;
}
}

AMapViewManager

代码注解

• 监听view的listener

 @Nullable
@Override
public Map getExportedCustomDirectEventTypeConstants() {
Map<String, Map<String, String>> map = new HashMap<>();
//mapBuilder.put("Android里面的方法名", MapBuilder.of("registrationName", "JS端的方法名"));
//Android里面的方法名类似于广播的action
map.put("onMapInitialed", MapBuilder.of("registrationName", "onMapInitialed"));
return map;
}

viewManager如何被外部的js调用的

1. viewManager通过Module来暴露方法
2. 通过属性的更新来调用

/**
* 设置线路规划参数
*/
@ReactProp(name = "drivingRoutePlan")
@SuppressWarnings("unused")
public void setDrivingRoutePlan(MyAMapView myAMapView, ReadableMap drivingRoutePlan) {
try {
double latitude = drivingRoutePlan.getDouble("latitude");
double longitude = drivingRoutePlan.getDouble("longitude");
int mode = drivingRoutePlan.getInt("mode");
DriveRouteBiz driveRouteBiz = new DriveRouteBiz(reactContext, myAMapView);
driveRouteBiz.searchRouteResult(ROUTE_TYPE_DRIVE, mode, latitude, longitude);
} catch (NoSuchKeyException e) {
}
}

error

1. 属性不能更新
   js代码没问题,请检查被调用的android方法是否有空指针

代码

package com.aiyunbao;
import android.support.annotation.Nullable;
import com.aiyunbao.aMap.MyAMapView;
import com.aiyunbao.route.DriveRouteBiz;
import com.amap.api.maps.CameraUpdateFactory;
import com.facebook.react.bridge.NoSuchKeyException;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.common.MapBuilder;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.ViewGroupManager;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.react.uimanager.events.RCTEventEmitter;
import java.util.HashMap;
import java.util.Map;
import static com.aiyunbao.route.DriveRouteBiz.ROUTE_TYPE_DRIVE;
import static com.amap.api.maps.AMapOptions.LOGO_POSITION_BOTTOM_CENTER;
import static com.amap.api.maps.AMapOptions.LOGO_POSITION_BOTTOM_LEFT;
import static com.amap.api.maps.AMapOptions.LOGO_POSITION_BOTTOM_RIGHT;
/**
* Created by aiyun-pc1 on 2017/5/8.
* 普通地图view,提供定位 poi搜索 地址转码 marker标记
*/
public class AMapViewManager extends ViewGroupManager<MyAMapView> {
private static ReactApplicationContext reactContext;
private Map<String, Object> constants;
public AMapViewManager(ReactApplicationContext reactContext) {
this.reactContext = reactContext;
}
@Override
public String getName() {
return "RCTAMapView";
}
@Override
protected MyAMapView createViewInstance(ThemedReactContext reactContext) {
setConstants();
MyAMapView view = new MyAMapView(reactContext);
return view;
}
public void setConstants() {
constants = new HashMap<>();
//Logo的位置
constants.put("LOGO_POSITION_BOTTOM_LEFT", LOGO_POSITION_BOTTOM_LEFT);
constants.put("LOGO_POSITION_BOTTOM_CENTER", LOGO_POSITION_BOTTOM_CENTER);
constants.put("LOGO_POSITION_BOTTOM_RIGHT", LOGO_POSITION_BOTTOM_RIGHT);
}
/**
* 是否显示用户当前位置（默认为开启）
*/
@ReactProp(name = "showsUserLocation", defaultBoolean = true)
@SuppressWarnings("unused")
public void setShowsUserLocation(MyAMapView myAMapView, Boolean showsUserLocation) {
// 设置为true表示启动显示定位蓝点，false表示隐藏定位蓝点并不进行定位，
myAMapView.getAmap().setMyLocationEnabled(showsUserLocation);
}
//
//
@ReactProp(name = "userLocationRepresentation", defaultBoolean = true)
//
@SuppressWarnings("unused")
//
public void setUserLocationRepresentation(MyAMapView myAMapView, Boolean userLocationRepresentation) {
//
//
}
/**
* 跟随模式
*/
@ReactProp(name = "userTrackingMode", defaultBoolean = true)
@SuppressWarnings("unused")
public void setUserTrackingMode(MyAMapView myAMapView, Boolean userTrackingMode) {
}
/**
* logo
* //Logo的位置
* 左下：LOGO_POSITION_BOTTOM_LEFT
* 底部居中：LOGO_POSITION_BOTTOM_CENTER
* 右下：LOGO_POSITION_BOTTOM_RIGHT
*/
@ReactProp(name = "logoCenterAndroid")
@SuppressWarnings("unused")
public void setLog(MyAMapView myAMapView, String logoCenterAndroid) {
myAMapView.getAmap().getUiSettings().setLogoPosition((Integer) constants.get(logoCenterAndroid));
}
/**
* 比例尺
*/
@ReactProp(name = "showsScale")
@SuppressWarnings("unused")
public void setShowsScale(final MyAMapView myAMapView, final Boolean showsScale) {
//控制比例尺控件是否显示
myAMapView.getAmap().getUiSettings().setScaleControlsEnabled(showsScale);
}
/**
* 缩放手势
*/
@ReactProp(name = "zoomEnabled", defaultBoolean = true)
@SuppressWarnings("unused")
public void setZoomEnabled(MyAMapView myAMapView, Boolean zoomEnabled) {
myAMapView.getAmap().getUiSettings().setZoomGesturesEnabled(zoomEnabled);
}
/**
* 滑动手势
*/
@ReactProp(name = "scrollEnabled", defaultBoolean = true)
@SuppressWarnings("unused")
public void setScrollEnabled(MyAMapView myAMapView, Boolean scrollEnabled) {
myAMapView.getAmap().getUiSettings().setScrollGesturesEnabled(scrollEnabled);
}
/**
* 旋转手势
*/
@ReactProp(name = "rotateEnabled", defaultBoolean = true)
@SuppressWarnings("unused")
public void setRotateEnabled(MyAMapView myAMapView, Boolean rotateEnabled) {
myAMapView.getAmap().getUiSettings().setRotateGesturesEnabled(rotateEnabled);
}
/**
* 倾斜手势
*/
@ReactProp(name = "rotateCameraEnabled", defaultBoolean = true)
@SuppressWarnings("unused")
public void setRotateCameraEnabled(MyAMapView myAMapView, Boolean rotateCameraEnabled) {
myAMapView.getAmap().getUiSettings().setTiltGesturesEnabled(rotateCameraEnabled);
}
/**
* 缩放级别
*/
@ReactProp(name = "zoomLevel")
@SuppressWarnings("unused")
public void setZoomLevel(MyAMapView myAMapView, float zoomLevel) {
myAMapView.getAmap().moveCamera(CameraUpdateFactory.zoomTo(zoomLevel));
}
/**
* 设置中心大头针
*/
@ReactProp(name = "startAnnotation")
@SuppressWarnings("unused")
public void setStartAnnotation(MyAMapView myAMapView, ReadableMap startAnnotation) {
}
/**
*
*/
@ReactProp(name = "destinationAnnotation")
@SuppressWarnings("unused")
public void setDestinationAnnotation(MyAMapView myAMapView, ReadableMap destinationAnnotation) {
}
/**
* 设置线路规划参数
*/
@ReactProp(name = "drivingRoutePlan")
@SuppressWarnings("unused")
public void setDrivingRoutePlan(MyAMapView myAMapView, ReadableMap drivingRoutePlan) {
try {
double latitude = drivingRoutePlan.getDouble("latitude");
double longitude = drivingRoutePlan.getDouble("longitude");
int mode = drivingRoutePlan.getInt("mode");
DriveRouteBiz driveRouteBiz = new DriveRouteBiz(reactContext, myAMapView);
driveRouteBiz.searchRouteResult(ROUTE_TYPE_DRIVE, mode, latitude, longitude);
} catch (NoSuchKeyException e) {
}
/**
* {
latitude: PropTypes.number,
longitude: PropTypes.number,
waypoints: PropTypes.arrayOf(PropTypes.shape(
)),
strategy: PropTypes.number,
startPlan: PropTypes.bool,
mode: PropTypes.number
}
*/
}
//
//
context.getJSModule(RCTEventEmitter.class).receiveEvent(id, "Android里面的方法名",map);
//
某方法(value){
alert('收到！');}
//
render() {
//
return (
//
<View style={styles.container}>
//
<MyWidget
style={styles.welcome
//
JS端的方法名={this.某方法.bind(this)}>
</MyWidget>
</View>
);}
@Nullable
@Override
public Map getExportedCustomDirectEventTypeConstants() {
Map<String, Map<String, String>> map = new HashMap<>();
//mapBuilder.put("Android里面的方法名", MapBuilder.of("registrationName", "JS端的方法名"));
map.put("onMapInitialed", MapBuilder.of("registrationName", "onMapInitialed"));
map.put("onRegionChange", MapBuilder.of("registrationName", "onRegionChange"));
map.put("onRegionChangeComplete", MapBuilder.of("registrationName", "onRegionChangeComplete"));
map.put("onDrivingRoutePlanComplete", MapBuilder.of("registrationName", "onDrivingRoutePlanComplete"));
map.put("onDrivingRoutePlanFailed", MapBuilder.of("registrationName", "onDrivingRoutePlanFailed"));
map.put("onRegionChangeCompleteWithReGeoResult", MapBuilder.of("registrationName", "onRegionChangeCompleteWithReGeoResult"));
map.put("onRegionChangeCompleteWithReGeoResultFailed", MapBuilder.of("registrationName", "onRegionChangeCompleteWithReGeoResultFailed"));
map.put("onFailToLocateUser", MapBuilder.of("registrationName", "onFailToLocateUser"));
return map;
}
/**
*
* @param id viewId
* @param eventName Android原生事件名
* @param event 返回的参数
*/
public static void sendEvent(int id, String eventName, @Nullable WritableMap event) {
reactContext.getJSModule(RCTEventEmitter.class)
.receiveEvent(id, eventName, event);
}
}

AMapModule

代码注解

• 帮助viewManager暴露一下方法给外部js使用

/**
* 跳转到指定的位置
*/
@ReactMethod
@SuppressWarnings("unused")
public void changeCamera(int tag, ReadableMap readableMap) {
mapView = ((MyAMapView) reactContext.getCurrentActivity().findViewById(tag));
LatLng latLng = new LatLng(readableMap.getDouble(longitude), readableMap.getDouble(latitude));
mapView.changeCamera(
CameraUpdateFactory.newCameraPosition(new CameraPosition(latLng
, 18, 30, 30)));
MarkerUtil.addMarkersToMap(mapView.getAmap(), latLng, "title", "");
}

• tag为js传过来的id
  findNodeHandle(this) 传递View Id给RN module

mapView = ((MyAMapView) reactContext.getCurrentActivity().findViewById(tag));

代码

package com.aiyunbao;
import android.app.Activity;
import android.content.Intent;
import com.aiyunbao.Geocoder.GeocoderBiz;
import com.aiyunbao.aMap.MyAMapView;
import com.aiyunbao.activty.DirveNaviActivity;
import com.aiyunbao.location.LocationBiz;
import com.aiyunbao.marker.MarkerUtil;
import com.aiyunbao.poi.PoiSearchBiz;
import com.amap.api.maps.CameraUpdateFactory;
import com.amap.api.maps.model.CameraPosition;
import com.amap.api.maps.model.LatLng;
import com.amap.api.services.core.LatLonPoint;
import com.amap.api.services.poisearch.PoiSearch;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.ReadableMap;
/**
* Created by aiyun-pc1 on 2017/5/9.
*
*/
public class AMapModule extends ReactContextBaseJavaModule {
private ReactApplicationContext reactContext;
private MyAMapView mapView;
private final String longitude = "lng";
private final String latitude = "lat";
//poi搜索
private PoiSearch.Query query;
private PoiSearch poiSearch;
private PoiSearchBiz poiSearchBiz;
//地理编码
private GeocoderBiz geocoderBiz;
public AMapModule(ReactApplicationContext reactContext) {
super(reactContext);
this.reactContext = reactContext;
}
@Override
public String getName() {
return "AMap";
}
private void setMyAMapView(int tag) {
if (mapView == null) {
mapView = ((MyAMapView) reactContext.getCurrentActivity().findViewById(tag));
}
}
private void setGeocoderBiz() {
if (geocoderBiz == null) {
geocoderBiz = new GeocoderBiz(reactContext);
}
}
/**
* 跳转到指定的位置
*/
@ReactMethod
@SuppressWarnings("unused")
public void changeCamera(int tag, ReadableMap readableMap) {
mapView = ((MyAMapView) reactContext.getCurrentActivity().findViewById(tag));
LatLng latLng = new LatLng(readableMap.getDouble(longitude), readableMap.getDouble(latitude));
mapView.changeCamera(
CameraUpdateFactory.newCameraPosition(new CameraPosition(latLng
, 18, 30, 30)));
MarkerUtil.addMarkersToMap(mapView.getAmap(), latLng, "title", "");
}
/**
* 在地图上添加marker
*/
@ReactMethod
@SuppressWarnings("unused")
public void addMarkersToMap(int tag, ReadableMap readableMap) {
setMyAMapView(tag);
LatLng latLng = new LatLng(readableMap.getDouble(longitude), readableMap.getDouble(latitude));
MarkerUtil.addMarkersToMap(mapView.getAmap(), latLng);
}
/**
* 在地图上添加marker,并绘制地图上的信息窗口
*/
@ReactMethod
@SuppressWarnings("unused")
public void addMarkersWithInfoToMap(int tag, ReadableMap readableMap, String title, String detail) {
setMyAMapView(tag);
LatLng latLng = new LatLng(readableMap.getDouble(longitude), readableMap.getDouble(latitude));
MarkerUtil.addMarkersToMap(mapView.getAmap(), latLng, title, detail);
}
/**
* 清空地图上所有已经标注的marker
*/
@ReactMethod
@SuppressWarnings("unused")
public void clearAllMarker(int tag) {
setMyAMapView(tag);
MarkerUtil.clearMarker(mapView.getAmap());
}
/**
* 开始进行poi搜索
*
*/
@ReactMethod
@SuppressWarnings("unused")
public void getPOISearchResult(ReadableMap params, Callback result, Callback error) {
/**
*
{
//
keywords: "武侯祠",
//
city: "成都",
//
offset: 10,
//
},
*/
String keywords = params.getString("keywords");
String city = params.getString("city");
double latitude = 0;
double longitude = 0;
int radius = 0;
int pageSize = params.getInt("offset");
LatLonPoint latLonPoint = new LatLonPoint(latitude, longitude);
if (poiSearchBiz == null)
poiSearchBiz = new PoiSearchBiz(reactContext, mapView);
poiSearchBiz.doSearchQuery(keywords, city, pageSize, radius, latLonPoint, result, error);
}
/**
* 开始进行poi搜索
*
*/
@ReactMethod
@SuppressWarnings("unused")
public void getPOIAroundSearchResult(ReadableMap params, Callback result, Callback error) {
/**
*
keywords: "天府广场",
//
city: "成都",
//
latitude: 30.648623,
//
longitude: 104.040568,
//
radius: 3000
*/
String keywords = params.getString("keywords");
String city = params.getString("city");
double latitude = params.getDouble("latitude");
double longitude = params.getDouble("longitude");
int radius = params.getInt("radius");
int pageSize = 20;
LatLonPoint latLonPoint = new LatLonPoint(latitude, longitude);
if (poiSearchBiz == null)
poiSearchBiz = new PoiSearchBiz(reactContext, mapView);
poiSearchBiz.doSearchQuery(keywords, city, pageSize, radius, latLonPoint, result, error);
}
/**
* 跳转到指定的poi结果页中
*/
@ReactMethod
@SuppressWarnings("unused")
public void selectPoiPage(int page, Callback callback) {
if (poiSearchBiz != null) {
poiSearchBiz.selectPoiPage(page, callback);
} else {
callback.invoke("请先使用poi查询再跳转指定的结果页");
}
}
/**
* poi搜索自动提示
*
* @param newText
* @param city
传入null或者“”代表在全国进行检索，否则按照传入的city进行检索
* @param tipCallback
*/
@ReactMethod
@SuppressWarnings("unused")
public void poiInputTip(int tag, String newText, String city, Callback tipCallback) {
setMyAMapView(tag);
poiSearchBiz = new PoiSearchBiz(reactContext, mapView);
poiSearchBiz.poiInputTip(newText, city, tipCallback);
}
//
@ReactMethod
//
@SuppressWarnings("unused")
//
public void searchRouteResult(int tag) {
//
setMyAMapView(tag);
//
DriveRouteBiz driveRouteBiz = new DriveRouteBiz(reactContext, mapView);
//
driveRouteBiz.searchRouteResult(ROUTE_TYPE_DRIVE, RouteSearch.DrivingDefault);
//
}
@ReactMethod
@SuppressWarnings("unused")
public void driveNavi(int tag) {
try {
Activity currentActivity = getCurrentActivity();
if (null != currentActivity) {
Intent intent = new Intent(currentActivity, DirveNaviActivity.class);
intent.putExtra("data", "data");
currentActivity.startActivity(intent);
}
} catch (Exception e) {
throw new JSApplicationIllegalArgumentException(
"Could not open the activity : " + e.getMessage());
}
}
@ReactMethod
@SuppressWarnings("unused")
public void startLocationOneTime(Boolean isOnceLocation, Callback callback, Callback error) {
LocationBiz locationBiz = new LocationBiz(reactContext);
locationBiz.startLocation(isOnceLocation, callback, error);
}
@ReactMethod
@SuppressWarnings("unused")
public void getGeoCoding(String name, Callback callback) {
setGeocoderBiz();
geocoderBiz.getGeoCoding(name, callback);
}
@ReactMethod
@SuppressWarnings("unused")
public void getReGeoCoding(double lat, double lng, Callback callback) {
setGeocoderBiz();
geocoderBiz.getReGeoCoding(lat, lng, callback);
}
@ReactMethod
public void startLocationOneTime() {
}
}

AMapPackage

package com.aiyunbao;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.Arrays;
import java.util.Collections;
import java.util.List;
/**
* Created by aiyun-pc1 on 2017/5/8.
*/
public class AMapPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
return Arrays.<NativeModule>asList(
new AMapModule(reactContext)
);
}
@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Arrays.<ViewManager>asList(
new AMapViewManager(reactContext),
new ANaviMapViewManager(reactContext)
);
}
}

MainApplication

package com.aiyunbao;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import java.util.Arrays;
import java.util.List;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new AMapPackage()
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}

js代码

/**
* Created by aiyun-pc1 on 2017/5/8.
*/
import React, {Component, PropTypes} from 'react';
import {
NativeAppEventEmitter,
NativeModules,
Platform,
StyleSheet,
requireNativeComponent,
View,
findNodeHandle,
} from 'react-native';
const MapManager = NativeModules.AMapModuleAndroid;
const MapView = requireNativeComponent('RCTAMapView', AMapViewTest);
export default class AMapViewTest extends Component {
static propTypes = {
...View.propTypes, // 包含默认的View的属性
LatLng: PropTypes.object,
PAGESIZE: PropTypes.number,
RADIUS: PropTypes.number,
QUERYTYPE: PropTypes.string,
UISETTING: PropTypes.object,
onPoiSearch: PropTypes.func.isRequired,
onMapViewCenterChangeFinish: PropTypes.func,
onMapInitialed: PropTypes.func
};
static defaultProps = {};
_onMapInitialed = (event) => {
if (!this.props.onMapInitialed) {
return;
}
this.props.onMapInitialed(event.nativeEvent);
};
render() {
return (
<MapView

{...this.props}
onMapInitialed={this._onMapInitialed}
/>
);
}
// findNodeHandle(this) 传递View Id给RN module
// getCenterLocation() {
//
MapManager.getCenterLocation(findNodeHandle(this))
// }
/**
* 39.90403, 116.407525 // 北京市经纬度
39.983456, 116.3154950// 北京市中关村经纬度
31.238068, 121.501654 // 上海市经纬度
39.989614, 116.481763 // 方恒国际中心经纬度
30.679879, 104.064855 // 成都市经纬度
34.341568, 108.940174 // 西安市经纬度
34.7466, 113.625367 // 郑州市经纬度
* @constructor
*/
testMapMethod() {
let latlng = {
'lng': 34.7466,
'lat': 113.625367
};
let latlng1 = {
'lng': 34.341568,
'lat': 108.940174
};
let latlng2 = {
'lng': 30.679879,
'lat': 104.064855
};
let latlng3 = {
'lng': 39.989614,
'lat': 116.481763
};
// MapManager.test(findNodeHandle(this));
// MapManager.changeCamera(findNodeHandle(this), latlng);
// MapManager.addMarkersWithInfoToMap(findNodeHandle(this), latlng, '郑州市经纬度', '郑州市经纬度');
// MapManager.addMarkersWithInfoToMap(findNodeHandle(this), latlng1, '西安市经纬度', '西安市经纬度');
// MapManager.addMarkersWithInfoToMap(findNodeHandle(this), latlng2, '成都市经纬度', '成都市经纬度');
// MapManager.addMarkersToMap(findNodeHandle(this), latlng3);
MapManager.driveNavi(findNodeHandle(this));
}
/**
* 开始进行poi搜索
* @param keyWord
* @param area 地区可以传空字符,空字符代表全国
* @param pageSize
*/
searchPoi(keyWord, area, pageSize) {
MapManager.searchPoi(findNodeHandle(this), keyWord, area, pageSize);
}
/**
* 跳转到指定的poi结果页中
* @param page
* @param callback
*/
selectPoiPage(page, callback) {
MapManager.selectPoiPage(page, callback);
}
/**
* poi搜索自动提示
* @param newText
* @param city 传入null或者“”代表在全国进行检索，否则按照传入的city进行检索
* @param callback
*/
poiInputTip(newText, city, callback) {
MapManager.poiInputTip(findNodeHandle(this), newText, city, callback);
}
searchRouteResult() {
MapManager.searchRouteResult(findNodeHandle(this));
}
startSmoothMove() {
MapManager.startSmoothMove(findNodeHandle(this));
}
}

• 以上代码并不是最终修订版,还有一些原生的高德地图类没上传 如果需要帮助可以在文章中回复我

参考了以下大神的博客
1. http://blog.csdn.net/qq_20738965/article/details/53363142

最后

以上就是可靠钥匙为你收集整理的react native android 高德地图原生代码编写react native android 高德地图原生代码编写的全部内容，希望文章能够帮你解决react native android 高德地图原生代码编写react native android 高德地图原生代码编写所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。