react-native-baidu-map-edited v0.6.4
react-native-baidu-map-edited
首先感谢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+
Install 安装
npm install react-native-baidu-map-edited --save
或者
yarn add react-native-baidu-map-edited
Import 导入
Android Studio
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"/>
Xcode
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
AppDelegate.m init 初始化
#import "RCTBaiduMapViewManager.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
[RCTBaiduMapViewManager initSDK:@"api key"];
...
}
Usage 使用方法
import { MapView, MapTypes, MapModule, Geolocation } from 'react-native-baidu-map-edited'
MapView Props 属性
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 |
MapModule Methods (Deprecated)
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()
Geolocation Methods
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": ""} |