首先感谢lovebing,以下代码基本都来自lovebing,稍微做了一些改动(只修改了iOS部分),编译不报错而已。: )
Baidu Map SDK modules and view for React Native(Android & iOS), support react native 0.40+
百度地图 React Native 模块,支持 react native 0.40+
npm install react-native-baidu-map-edited --save
或者
yarn add react-native-baidu-map-edited
-
settings.gradle
include ':react-native-baidu-map-edited' project(':react-native-baidu-map-edited').projectDir = new File(settingsDir, '../node_modules/react-native-baidu-map-edited/android')
-
build.gradle
compile project(':react-native-baidu-map-edited')
-
MainApplication
new BaiduMapPackage(getApplicationContext())
-
AndroidMainifest.xml
<meta-data android:name="com.baidu.lbsapi.API_KEY" android:value="xx"/>
-
Project navigator->Libraries->Add Files to 选择 /node_modules/react-native-baidu-map-edited/ios/RCTBaiduMap.xcodeproj
-
Project navigator->Build Settings->Search Paths, Framework search paths 添加 $(SRCROOT)/../node_modules/react-native-baidu-map-edited/ios/lib
-
Project navigator->Build Settings->Search Paths, Header search paths 添加 $(SRCROOT)/../node_modules/react-native-baidu-map-edited/ios/RCTBaiduMap
-
添加依赖, react-native-baidu-map-edited/ios/lib 下的全部 framework, 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
#import "RCTBaiduMapViewManager.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
[RCTBaiduMapViewManager initSDK:@"api key"];
...
}
import { MapView, MapTypes, MapModule, Geolocation } from 'react-native-baidu-map-edited'
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": ""}
|