react native 百度地图-白红宇

react native 百度地图

阅读量：6613 次

发布时间：2019-06-24

本文共 5806 字，大约阅读时间需要 19 分钟。

react-native-baidu-map

react-native-baidu-map 配置

本教程配有demo，如果觉得对你有用，请给予关注、收藏喔

install 安装

`npm install react-native-baidu-map --save`

去官方申请key

百度地图sdk有教程

ios 配置

Project navigator->Libraries->Add Files to 选择 node_modules/react-native-baidu-map/ios/RCTBaiduMap.xcodeproj

Project navigator->Build Phases->Link Binary With Libraries 加入 libRCTBaiduMap.a

Project navigator->Build Settings->Search Paths

TARGETS-Build Setting - Framework Search Paths 里面添加
```
$(SRCROOT)/../node_modules/react-native-baidu-map/ios/lib
```

TARGETS-Build Setting - Header Search Paths 里面添加

$(SRCROOT)/../node_modules/react-native-baidu-map/ios/lib  $(SRCROOT)/../node_modules/react-native-baidu-map/ios/RCTBaiduMap

TARGETS-Build Setting - Library Search Paths 里面添加

$(SRCROOT)/../node_modules/react-native-baidu-map/ios/lib

Project navigator->Build Phases->Link Binary With Libraries 加入 CoreLocation.framework和QuartzCore.framework、OpenGLES.framework、SystemConfiguration.framework、CoreGraphics.framework、Security.framework、libsqlite3.0.tbd（xcode7以前为 libsqlite3.0.dylib）、CoreTelephony.framework 、libstdc++.6.0.9.tbd（xcode7以前为libstdc++.6.0.9.dylib）

在项目级的Frameworks文件夹中添加依赖（Add Files to ）, node_modules/react-native-baidu-map/ios/lib 下的全部 framwordk
- TARGETS-Build Setting - Header Search Paths 里面添加$(inherited)
- 如添加的BaiduMapAPI_*.framework不是放在Frameworks文件夹中，可不添加$(inherited)

ios项目根目录中添加 node_modules/react-native-baidu-map/ios/lib/BaiduMapAPI_Map.framework/Resources/mapapi.bundle 文件

AppDelegate.m init 初始化

#import "RCTBaiduMapViewManager.h"  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions  {      ...      [RCTBaiduMapViewManager initSDK:@"api key"];      ...  }

处理报错

RCTBaiduMapView.h 报错 'RCTViewManager.h' file not found

RCTBaiduMapView.h 报错 'RCTConvert+CoreLocation.h' file not found

//#import "RCTViewManager.h"  #import 
        
           //#import "RCTConvert+CoreLocation.h"  #import

Error: Redefinition of RCTMethodInfo

在BaseModule.h下  把import "RCTBridgeModule.h" —> #import

android 配置

settings.gradle 加入

include ':react-native-baidu-map'  project(':react-native-baidu-map').projectDir = new File(settingsDir, '../node_modules/react-native-baidu-map/android')

android/app/build.gradle 中加入

compile project(':react-native-baidu-map')

android/app/src/main/java/../MainApplication 中加入new BaiduMapPackage(getApplicationContext())

[@Override](https://my.oschina.net/u/1162528)      protected List
      
        getPackages() {        return Arrays.
       
        asList(            new MainReactPackage(),            new BaiduMapPackage(getApplicationContext()) //这一句            ...        );      }

android/app/src/main/AndroidMainifest.xml 文件加入

application 标签中加入
```
        
```

在manifest标签级下面加入

错误处理
- ***/KJChildDemo/node_modules/react-native-baidu-map/android/src/main/java/org/lovebing/reactnative/baidumap/BaiduMapPackage.javaError:(49, 5) 错误: 方法不会覆盖或实现超类型的方法
@Override注释掉貌似0.47后没有这个方法了
- **/android/app/src/main/java/com/kjchilddemo/MainApplication.java Error:(31, 15) 错误: 找不到符号符号: 类 BaiduMapPackage
在这个文件头部加入import org.lovebing.reactnative.baidumap.BaiduMapPackage;

react-native-baidu-map 使用

MapView Props

zoomControlsVisible 缩放控件是否可见 ture（Android only）

trafficEnabled 交通图 false

baiduHeatMapEnabled 百度地图热力图 false

mapType 地图类型 1--一般性的二维地图 2--卫星地图

zoom 放大缩小

center 地图位置

marker 标记

markers 多个标记

onMapStatusChangeStart Android

onMapStatusChange 地图放大，移动等变化时回调

onMapStatusChangeFinish Android

onMapLoaded 地图加载时调用函数

onMapClick 点击地图时调用函数,回调经纬度

onMapDoubleClick 双击地图时调用，回调经纬度

onMarkerClick 点击标记时回调

onMapPoiClick 点击（标点，位置）回调，

eolocation Methods

reverseGeoCode 反向地理编码

Geolocation.reverseGeoCode(lat,lng)                .then(data => {                  console.log('reverseGeoCode',data);                })                .catch(e =>{                  console.warn(e, 'error');                })   /***********回调结果************/   { address: '上海市浦东新区金海路22号',    city: '上海市',    district: '浦东新区',    longitude: '121.609842',    province: '上海市',    cityCode: '289',    streetName: '金海路',    latitude: '31.262580',    streetNumber: '22号' }

reverseGeoCodeGPS 反向地理编码GPS

Geolocation.reverseGeoCodeGPS(lat,lng)        .then(data => {          console.log('reverseGeoCodeGPS',data);        })        .catch(e =>{          console.warn(e, 'error');        })  /***********回调结果************/   { address: '上海市浦东新区东陆公路',    city: '上海市',    district: '浦东新区',    longitude: 121.62064,    province: '上海市',    cityCode: '289',    streetName: '东陆公路',    latitude: 31.26606,    streetNumber: '' }

geocode 地理编码（经纬度）

Geolocation.geocode('上海市','杨高中路')        .then(data => {          console.log('geocode',data);        })        .catch(e =>{          console.warn(e, 'error');        })  /***********回调结果************/   { longitude: '121.569186', latitude: '31.240405' }

getCurrentPosition 获取当前位置

Geolocation.getCurrentPosition()        .then(data => {          console.log('getCurrentPosition',data);        })        .catch(e =>{          console.warn(e, 'error');        })  /***********回调结果************/   { address: '上海市浦东新区杨高中路31弄-55-临',    city: '上海市',    district: '浦东新区',    longitude: 121.608108,    province: '上海市',    cityCode: '289',    streetName: '杨高中路',    latitude: 31.260488,    streetNumber: '31弄-55-临' }

ios

{"latitude": 0.0, "longitude": 0.0, "address": "", "province": "", "cityCode": "", "city": "", "district": "", "streetName": "", "streetNumber": ""}

Android

{"latitude": 0.0, "longitude": 0.0, "direction": -1, "altitude": 0.0, "radius": 0.0, "address": "", "countryCode": "", "country": "", "province": "", "cityCode": "", "city": "", "district": "", "street": "", "streetNumber": "", "buildingId": "", "buildingName": ""}