Baidu Map SDK modules and view for React Native(Android & IOS), support react native 0.57+
百度地图 React Native 模块,支持 react native 0.57+,已更新到最新的百度地图SDK版本。
Overlay for IOS 重构中。
Marker icon 的实现参考了 https://github.com/react-native-community/react-native-maps 的相关代码。
react-native doesn't support symlinks. see https://stackoverflow.com/questions/44061155/react-native-npm-link-local-dependency-unable-to-resolve-module. Can't install local package by using npm link
.
react-native 不支持软链,参考: https://stackoverflow.com/questions/44061155/react-native-npm-link-local-dependency-unable-to-resolve-module 所以不能使用 npm link 的方式安装本地的包
1.JS
- node: 8.0+
2.Android
- Android SDK: api 28+
- gradle: 4.5
- Android Studio: 3.1.3+
3.IOS
- XCode: 8.0+
mkdir example/node_modules/react-native-baidu-map
cp -R package.json js index.js ios android LICENSE README.md example/node_modules/react-native-baidu-map/
rm -rf example/node_modules/react-native-baidu-map/ios/RCTBaiduMap.xcodeproj
npm install react-native-baidu-map --save
react-native link react-native-baidu-map
使用 pod
Podfile 增加
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge',
'DevSupport',
'RCTText',
'RCTNetwork',
'RCTWebSocket',
'RCTAnimation'
]
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
pod 'react-native-baidu-map', :podspec => '../node_modules/react-native-baidu-map/ios/react-native-baidu-map.podspec'
#import "RCTBaiduMapViewManager.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
[RCTBaiduMapViewManager initSDK:@"api key"];
...
}
import { MapView, MapTypes, Geolocation, Overlay } from 'react-native-baidu-map'
Prop | Type | Default | Description |
---|---|---|---|
zoomControlsVisible | bool | true | Android only |
trafficEnabled | bool | false | |
baiduHeatMapEnabled | bool | false | |
mapType | number | 1 | |
zoom | number | 10 | |
center | object | null | {latitude: 0, longitude: 0} |
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 |
const { Marker, Arc, Circle, Polyline, Polygon, Text, InfoWindow } = Overlay;
Prop | Type | Default | Description |
---|---|---|---|
title | string | null | |
location | object | {latitude: 0, longitude: 0} | |
perspective | bool | null | |
flat | bool | null | |
rotate | float | 0 | |
icon | any | null | icon图片,同 的 source 属性 |
alpha | float | 1 |
Prop | Type | Default | Description |
---|---|---|---|
color | string | AA00FF00 | |
width | int | 4 | |
poins | array | [{latitude: 0, longitude: 0}, {latitude: 0, longitude: 0}, {latitude: 0, longitude: 0}] | 数值长度必须为 3 |
Prop | Type | Default | Description |
---|---|---|---|
radius | int | 1400 | |
fillColor | string | 000000FF | |
stroke | object | {width: 5, color: 'AA000000'} | |
center | object | {latitude: 0, longitude: 0} |
Prop | Type | Default | Description |
---|---|---|---|
points | array | [{latitude: 0, longitude: 0}] | |
color | string | AAFF0000 |
Prop | Type | Default | Description |
---|---|---|---|
points | array | [{latitude: 0, longitude: 0}] | |
fillColor | string | AAFFFF00 | |
stroke | object | {width: 5, color: 'AA00FF00'} |
Prop | Type | Default | Description |
---|---|---|---|
text | string | ||
fontSize | int | ||
fontColor | string | ||
bgColor | string | ||
rotate | float | ||
location | object | {latitude: 0, longitude: 0} |
Prop | Type | Default | Description |
---|---|---|---|
location | object | {latitude: 0, longitude: 0} | |
visible | bool | false | 点击 marker 后才能设为 true |
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": ""} |