Baidu Map SDK modules and view for React Native(Android & IOS), support react native 0.40+
百度地图 React Native 模块,支持 react native 0.40+
借鉴的https://github.com/lovebing/react-native-baidu-map ,总是不更新,就自己重新封装了一下
使用的百度地图SDK版本:4.0.0
npm install react-native-yxz-baidumap --save
or
yarn add react-native-yxz-baidumap
-
settings.gradle
include ':react-native-yxz-baidumap' project(':react-native-yxz-baidumap').projectDir = new File(settingsDir, '../node_modules/react-native-yxz-baidumap/android')
-
build.gradle
compile project(':react-native-yxz-baidumap')
-
MainApplication
new BaiduMapPackage(getApplicationContext())
-
AndroidMainifest.xml
<meta-data android:name="com.baidu.lbsapi.API_KEY" android:value="xx"/>
-
Project navigator->Libraries->Add Files to 选择 react-native-yxz-baidumap/ios/RNBaiduMap.xcodeproj
-
Project navigator->Build Phases->Link Binary With Libraries 加入 libRNBaiduMap.a
-
Project navigator->Build Settings->Search Paths, Framework search paths 添加
$(SRCROOT)/../node_modules/react-native-yxz-baidumap/ios/lib,Header search paths 添加 $ (SRCROOT)/../node_modules/react-native-yxz-baidumap/ios/RNBaiduMap -
添加依赖, react-native-yxz-baidumap/ios/lib 下的全部 framwordk, 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)
-
添加 BaiduMapAPI_Map.framework/Resources/mapapi.bundle
-
其它一些注意事项可参考百度地图LBS文档
#import "RCTBaiduMapViewManager.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
[RCTBaiduMapViewManager initSDK:@"api key"];
...
}
import { MapView, MapTypes, MapModule, Geolocation } from 'react-native-baidu-map
Name | Type | Default | Extra |
---|---|---|---|
zoomControlsVisible | bool | true | Android only |
trafficEnabled | bool | false | |
baiduHeatMapEnabled | bool | false | |
mapType | number | 1 | |
zoom | number | 10 | |
center | object | null | {latitude: 0, longitude: 0} |
marker | object | null | {latitude: 0, longitude: 0, title: ''} |
markers | array | [] | [marker, maker] |
onMapStatusChangeStart | func | undefined | Android only |
onMapStatusChange | func | undefined | |
onMapStatusChangeFinish | func | undefined | Android only |
onMapLoaded | func | undefined | |
onMapClick | func | undefined | |
onMapDoubleClick | func | undefined | |
onMarkerClick | func | undefined | |
onMapPoiClick | func | undefined |
setMarker(double lat, double lng)
setMapType(int mapType)
moveToCenter(double lat, double lng, float zoom)
Promise reverseGeoCode(double lat, double lng)
Promise reverseGeoCodeGPS(double lat, double lng)
Promise geocode(String city, String addr),
Promise getCurrentPosition()
Method | Result |
---|---|
Promise reverseGeoCode(double lat, double lng) | {"address": "", "province": "", "cityCode": "", "city": "", "district": "", "streetName": "", "streetNumber": ""} |
Promise reverseGeoCodeGPS(double lat, double lng) | {"address": "", "province": "", "cityCode": "", "city": "", "district": "", "streetName": "", "streetNumber": ""} |
Promise geocode(String city, String addr) | {"latitude": 0.0, "longitude": 0.0} |
Promise getCurrentPosition() | 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": ""} |