今天把地图整理一下，希望可以让大家派上用上。
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）
添加依赖, react-native-baidu-map/ios/lib 下的全部 framwordk:
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"]; ... } -
ios处理报错
(1)RCTBaiduMapView.h 报错 'RCTViewManager.h' file not found
-
RCTBaiduMapView.h 报错 'RCTConvert+CoreLocation.h' file not found
//#import "RCTViewManager.h" #import <React/RCTViewManager.h> //#import "RCTConvert+CoreLocation.h" #import <React/RCTConvert+CoreLocation.h>
(2)
#import "RCTBridgeModule.h" 注释即可
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 dependencies中加入
compile project(':react-native-baidu-map') -
android/app/src/main/java/../MainApplication 中加入
import org.lovebing.reactnative.baidumap.BaiduMapPackage;//这一句 [@Override](https://my.oschina.net/u/1162528) protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new BaiduMapPackage(getApplicationContext()) //这一句 ... ); } -
android/app/src/main/AndroidMainifest.xml 文件加入
-
application 标签中加入
<meta-data android:name="com.baidu.lbsapi.API_KEY" android:value="bF65Gy5KVAaFNS瞎写的xQkssgvR2dV"/> -
在manifest标签级下面加入
<!-- 这个权限用于进行网络定位--> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"> </uses-permission> <!-- 这个权限用于访问GPS定位--> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses- permission> <!-- 用于访问wifi网络信息，wifi信息会用于进行网络定位--> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses- permission> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> <uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" /> <uses-permission android:name="android.permission.WAKE_LOCK"/> <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" /> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> <uses-permission android:name="android.permission.GET_TASKS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.WRITE_SETTINGS" />
-
-
安卓错误处理
-
***/KJChildDemo/node_modules/react-native-baidu-map/android/src/main/java/org/lovebing/reactnative/baidumap/BaiduMapPackage.java错误: 方法不会覆盖或实现超类型的方法@Override注释掉 貌似0.47后没有这个方法了 -
**/android/app/src/main/java/com/kjchilddemo/MainApplication.java Error:错误: 找不到符号 符号: 类 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
import {Geolocation} from 'react-native-baidu-map';
-
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": ""}
-
亲测没有问题，觉得有用的小伙伴点个小红心和关注就行😄，么么哒。
