rnb
react-native-baidu-map-wu
npm i react-native-baidu-map-wu
rnb

react-native-baidu-map-wu

Baidu Map SDK modules and views for React Native(Android & iOS), support react native 0.61+. 百度地图 React Native 模块,支持 react native 0.61+,已更新到最新的百度地图SDK版本。

by Tang Yangjian

1.0.41 (see all)License:MITTypeScript:Built-In
npm i react-native-baidu-map-wu
Readme

react-native-baidu-map npm version

1.0.x 分支:react-native-baidu-map-old npm version

分支说明:

  • master:支持 react-native 0.61 及以上版本,Android 使用 androidx
  • 1.0.x:支持 react-native 0.60 及 0.50,Android 未使用 androidx

Baidu Map SDK modules and views for React Native(Android & iOS), support react native 0.61.2+

百度地图 React Native 模块。

使用示例:https://github.com/lovebing/react-native-baidu-map-examples

使用百度地图SDK最新版本。 Android 版导入的 SDK 包含以下模块:

  • 基础定位
  • 基础地图(含室内图)
  • 检索功能、LBS云检索
  • 计算工具

在线交流

QQ群:561086908

近期 TODO:

Android

  • 完善坐标转换
  • 添加一些常用的方法

iOS

  • 完善坐标标转换
  • 完善 Cluster(点聚合)
  • 添加一些常用的方法

Marker icon 的实现参考了 https://github.com/react-native-community/react-native-maps 的相关代码。

Android iOS

Dev & Test 开发和测试说明

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 的方式安装本地的包

Environments 环境要求

1.JS

  • node: 12+
  • react-native: 0.50.+ 2.Android
  • Android SDK: api 28+
  • gradle: 4.10.1
  • Android Studio: 3.1.3+

3.iOS

  • XCode: 11.3+

初始化

Android

AndroidManifest.xml 设置

必要的权限

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

application 下添加名为 com.baidu.lbsapi.API_KEY 的 meta,如

<meta-data
        android:name="com.baidu.lbsapi.API_KEY"
        android:value="uDRdqQMGQeoPGn5CwMmIYicdUIVv1YST" />

iOS

使用 BaiduMapManager.initSDK 方法设置 api key,如

import { BaiduMapManager } from 'react-native-baidu-map'
BaiduMapManager.initSDK('sIMQlfmOXhQmPLF1QMh4aBp8zZO9Lb2A');

Usage 使用方法

import { MapView, MapTypes, Geolocation, Overlay, MapApp } from 'react-native-baidu-map'

MapView Props 属性

PropTypeDefaultDescription
zoomControlsVisiblebooltrueAndroid only
trafficEnabledboolfalse
baiduHeatMapEnabledboolfalse
zoomGesturesEnabledbooltrue允许手势缩放
scrollGesturesEnabledbooltrue允许拖动
mapTypenumber1
zoomnumber10
showsUserLocationboolfalse是否显示定位
locationDataobjectnull定位信息 {latitude: 0, longitude: 0}
centerobjectnull{latitude: 0, longitude: 0}
onMapStatusChangeStartfuncundefinedAndroid only
onMapStatusChangefuncundefined
onMapStatusChangeFinishfuncundefinedAndroid only
onMapLoadedfuncundefined
onMapClickfuncundefined
onMapDoubleClickfuncundefined
onMarkerClickfuncundefined
onMapPoiClickfuncundefined

Overlay 覆盖物

const { Marker, Cluster, Arc, Circle, Polyline, Polygon, InfoWindow, HeatMap } = Overlay;
颜色取值说明

6 位(RRGGBB)或 8 位(AARRGGBB)

Marker Props 属性
PropTypeDefaultDescription
titlestringnull如果没有 InfoWindow,将会根据 title 生成 InfoWindow
titleOffsetYint-80title 作为 InfoWindow 展示的 y 轴偏移量,仅 Android
locationobject{latitude: 0, longitude: 0}
perspectiveboolnull仅 Android
flatboolnull仅 Android
rotatefloat0旋转角度,仅 Android
iconanynullicon图片,同 的 source 属性
alphafloat1透明度,仅 Android
animateTypestring动画效果:drop/grow/jump (iOS 仅支持 drop)
pinColorstringredred/green/purple,大头针颜色,仅 iOS
onClickfunc点击事件回调
Cluster 点聚合
Arc Props 属性
PropTypeDefaultDescription
strokewidth{width: 5, color: 'AA000000'}
pointsarray[{latitude: 0, longitude: 0}, {latitude: 0, longitude: 0}, {latitude: 0, longitude: 0}]数值长度必须为 3
dashboolfalse是否为虚线,仅 iOS
Circle Props 属性
PropTypeDefaultDescription
radiusint1400
fillColorstring000000FF
strokeobject{width: 5, color: 'AA000000'}
centerobject{latitude: 0, longitude: 0}
Polyline Props 属性
PropTypeDefaultDescription
pointsarray[{latitude: 0, longitude: 0}]
strokeobject{width: 5, color: 'AA000000'}
Polygon Props 属性
PropTypeDefaultDescription
pointsarray[{latitude: 0, longitude: 0}]
fillColorstringAAFFFF00
strokeobject{width: 5, color: 'AA00FF00'}
Text Props 属性
PropTypeDefaultDescription
textstring
fontSizeint
fontColorstring
bgColorstring
rotatefloat
locationobject{latitude: 0, longitude: 0}
MarkerIcon 使用 View 作为 marker 的 icon
InfoWindow Props 属性

必须作为 Marker 的子组件

PropTypeDefaultDescription
offsetYint0相对于 point 在 y 轴的偏移量,仅 Android

HeatMap Props 属性

PropTypeDefaultDescription
pointsarray
gradientobject{ colors: ['66FF00', 'FF0000'], startPoints: [0.2, 1.0] }颜色渐变对象
<MapView>
    <Marker/>
    <Marker>
        <InfoWindow style={{ backgroundColor: 'red', width: 200, height: 100}}>
            <View />
        </InfoWindow>
        <MarkerIcon style={{ backgroundColor: 'red', width: 40, height: 40}}>
            <View>
                <Text>ABC</Text>
            </View>
        </MarkerIcon>
    </Marker>
    <Cluster>
        <Marker/>
    </Cluster>
    <Arc />
    <Circle />
    <Polyline />
    <Polygon />
    <Overlay.Text>text</Overlay.Text>
    <HeatMap />
</MapView>

Marker 示例

<MapView>
    <Overlay.Marker rotate={45} icon={{ uri: 'https://mapopen-website-wiki.cdn.bcebos.com/homePage/images/logox1.png' }} location={{ longitude: 113.975453, latitude: 22.510045 }} />
    <Overlay.Marker location={{ longitude: 113.969453, latitude: 22.530045 }} />
</MapView>

Cluster 示例

<MapView>
    <Cluster>
        <Marker location={{ longitude: 113.969453, latitude: 22.530045 }} />
        <Marker location={{ longitude: 113.968453, latitude: 22.531045 }} />
        <Marker location={{ longitude: 113.967453, latitude: 22.532045 }} />
        <Marker location={{ longitude: 113.966453, latitude: 22.533045 }} />
        <Marker location={{ longitude: 113.965453, latitude: 22.534045 }} />
        <Marker location={{ longitude: 113.965453, latitude: 22.535045 }} />
    </Cluster>
</MapView>

BaiduMapManager

MethodDescriptionResult
void initSDK(string apiKey)iOS 初始化 SDK
Promise hasLocationPermission是否有定位权限

Geolocation Methods

MethodDescriptionResult
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(String coorType)coorType 可为 bd09llgcj02,默认 bd09ll{"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": ""}
startLocating(function listener, String coorType)开始持续定位
stopLocating停止持续定位

GetDistance Methods

MethodResult
Promise getLocationDistance({latitude: 0.0, longitude: 0.0}, {latitude: 0.0, longitude: 0.0}){"distance": 0.0}

MapApp Methods 调起百度地图客户端

MethodDescription
openDrivingRoute({latitude: 0.0, longitude: 0.0, name: ''}, {latitude: 0.0, longitude: 0.0}, name: '')调起百度地图驾车规划
openTransitRoute({latitude: 0.0, longitude: 0.0, name: ''}, {latitude: 0.0, longitude: 0.0}, name: '')调起百度地图公交路线
openWalkNavi({latitude: 0.0, longitude: 0.0, name: ''}, {latitude: 0.0, longitude: 0.0}, name: '')调起百度地图步行路线
iOS

必须在 Info.plist 中进行如下配置,否则不能调起百度地图客户端

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>baidumap</string>
</array>

鸣谢

jetbrains

Downloads/wk

14

GitHub Stars

776

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

30

OPEN ISSUES

219

OPEN PRs

7
VersionTagPublished
1.0.41
latest
6mos ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate