/react-native-baidu-map

添加骑行路线规划功能

Primary LanguageJava

此项目只是在lovebing项目上扩展实现的，感谢lovebing!添加了一个骑行路线规划的功能,去除了marker点击显示的功能，暂不支持ios；

注意：

1.此版本使用百度地图5.0.0版本；

2.引入此组件，需要更新PropTypes,最新版本的RN已经将此API单独放一个包中；

npm install --save prop-types

替换组件中的MapView.js与Geolocation.js中的PropTypes

引入方式：import PropTypes from 'prop-types'

react-native-baidu-map

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

百度地图 React Native 模块，支持 react native 0.30+

Android路线规划

Android

IOS

Install 安装

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

Import 导入

Android Studio

  • settings.gradle include ':react-native-baidu-map' project(':react-native-baidu-map').projectDir = new File(settingsDir, '../node_modules/react-native-baidu-map/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 属性

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