Naivete Precedes Misrepresentation

    react-native-baidu-map-old
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.37 • Public • Published

    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 属性

    Prop Type Default Description
    zoomControlsVisible bool true Android only
    trafficEnabled bool false
    baiduHeatMapEnabled bool false
    zoomGesturesEnabled bool true 允许手势缩放
    scrollGesturesEnabled bool true 允许拖动
    mapType number 1
    zoom number 10
    showsUserLocation bool false 是否显示定位
    locationData object null 定位信息 {latitude: 0, longitude: 0}
    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

    Overlay 覆盖物

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

    6 位(RRGGBB)或 8 位(AARRGGBB)

    Marker Props 属性
    Prop Type Default Description
    title string null 如果没有 InfoWindow,将会根据 title 生成 InfoWindow
    titleOffsetY int -80 title 作为 InfoWindow 展示的 y 轴偏移量,仅 Android
    location object {latitude: 0, longitude: 0}
    perspective bool null 仅 Android
    flat bool null 仅 Android
    rotate float 0 旋转角度,仅 Android
    icon any null icon图片,同 的 source 属性
    alpha float 1 透明度,仅 Android
    animateType string 动画效果:drop/grow/jump (iOS 仅支持 drop)
    pinColor string red red/green/purple,大头针颜色,仅 iOS
    onClick func 点击事件回调
    Cluster 点聚合
    Arc Props 属性
    Prop Type Default Description
    stroke width {width: 5, color: 'AA000000'}
    points array [{latitude: 0, longitude: 0}, {latitude: 0, longitude: 0}, {latitude: 0, longitude: 0}] 数值长度必须为 3
    dash bool false 是否为虚线,仅 iOS
    Circle Props 属性
    Prop Type Default Description
    radius int 1400
    fillColor string 000000FF
    stroke object {width: 5, color: 'AA000000'}
    center object {latitude: 0, longitude: 0}
    Polyline Props 属性
    Prop Type Default Description
    points array [{latitude: 0, longitude: 0}]
    stroke object {width: 5, color: 'AA000000'}
    Polygon Props 属性
    Prop Type Default Description
    points array [{latitude: 0, longitude: 0}]
    fillColor string AAFFFF00
    stroke object {width: 5, color: 'AA00FF00'}
    Text Props 属性
    Prop Type Default Description
    text string
    fontSize int
    fontColor string
    bgColor string
    rotate float
    location object {latitude: 0, longitude: 0}
    MarkerIcon 使用 View 作为 marker 的 icon
    InfoWindow Props 属性

    必须作为 Marker 的子组件

    Prop Type Default Description
    offsetY int 0 相对于 point 在 y 轴的偏移量,仅 Android

    HeatMap Props 属性

    Prop Type Default Description
    points array
    gradient object { 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

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

    Geolocation Methods

    Method Description 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(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

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

    MapApp Methods 调起百度地图客户端

    Method Description
    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

    Install

    npm i react-native-baidu-map-old

    DownloadsWeekly Downloads

    8

    Version

    1.0.37

    License

    MIT

    Unpacked Size

    30.7 MB

    Total Files

    245

    Last publish

    Collaborators

    • lovebing