0.1.2 • Published 7 years ago

react-native-baidu-map-sxitofork v0.1.2

Weekly downloads
1
License
ISC
Repository
github
Last release
7 years ago

react-native-baidu-map npm version

该项目基于https://github.com/lovebing/react-native-baidu-map库进行修改,在此特别感谢lovebing!

作者没维护更新了,所以弄了一下,如涉及版权问题,联系一下我!

Baidu Map SDK modules and view for React Native(Android & IOS), support react native 0.49+

百度地图 React Native 模块,支持 react native 0.49+

0.1.1 : 修改PropTypes到外组件 0.1.2 : 适配react新api的变更

Install 安装

npm install react-native-baidu-map-sxitofork --save

Import 导入

Android Studio

  • settings.gradle include ':react-native-baidu-map-sxitofork' project(':react-native-baidu-map').projectDir = new File(settingsDir, '../node_modules/react-native-baidu-map-sxitofork/android')

  • build.gradle compile project(':react-native-baidu-map')

  • MainApplicationnew BaiduMapPackage(getApplicationContext())

  • AndroidMainifest.xml <meta-data android:name="com.baidu.lbsapi.API_KEY" android:value="xx"/>

Xcode

  • Project navigator->Libraries->Add Files to 选择 react-native-baidu-map/ios/RCTBaiduMap.xcodeproj
  • Project navigator->Build Phases->Link Binary With Libraries 加入 libRCTBaiduMap.a
  • Project navigator->Build Settings->Search Paths, Framework search paths 添加 react-native-baidu-map/ios/lib,Header search paths 添加 react-native-baidu-map/ios/RCTBaiduMap
  • 添加依赖, react-native-baidu-map/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文档

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

MapView Props 属性

NameTypeDefaultExtra
zoomControlsVisiblebooltrueAndroid only
trafficEnabledboolfalse
baiduHeatMapEnabledboolfalse
mapTypenumber1
zoomnumber10
centerobjectnull{latitude: 0, longitude: 0}
markerobjectnull{latitude: 0, longitude: 0, title: ''}
markersarray[]marker, maker
onMapStatusChangeStartfuncundefinedAndroid only
onMapStatusChangefuncundefined
onMapStatusChangeFinishfuncundefinedAndroid only
onMapLoadedfuncundefined
onMapClickfuncundefined
onMapDoubleClickfuncundefined
onMarkerClickfuncundefined
onMapPoiClickfuncundefined

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

MethodResult
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": ""}