react-native-gizwits-baidu-map v1.0.73

react-native-baidu-map

react-native v0.63.2 支持 1.0.x 分支：react-native-baidu-map-old

分支说明：

• 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 的相关代码。

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

Overlay 覆盖物

const { Marker, Cluster, Arc, Circle, Polyline, Polygon, InfoWindow, HeatMap } = Overlay;

颜色取值说明

6 位(RRGGBB)或 8 位(AARRGGBB)

Marker Props 属性

Cluster 点聚合

Arc Props 属性

Circle Props 属性

Polyline Props 属性

Polygon Props 属性

Text Props 属性

MarkerIcon 使用 View 作为 marker 的 icon

InfoWindow Props 属性

必须作为 Marker 的子组件

HeatMap Props 属性

<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

Geolocation Methods

GetDistance Methods

MapApp Methods 调起百度地图客户端

iOS

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

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

鸣谢

1.0.51

-- 安卓百度sdk版本升级到v7.5.2 -- 安卓增加initSDK方法，可以js中设置apiKey

1.0.52

-- 安卓增加PoiSugSearch requestSuggestion(keyword: string, city: string, cityLimit: boolean); -- 安卓增加PoiSearch searchInCity(city: string, keyword: string, loadIndex: number, cityLimit: boolean, scope: number); searchNearby(keyword: string, latLng: Location, radius: number, loadIndex: number, cityLimit: boolean, scope: number);

1.0.53

-- 安卓marker更新自定义图标

#1.0.54 -- 更新iOS s.dependency 'BaiduMapKit', '6.5.1'

-- s.dependency 'BMKLocationKit', '2.0.2' iOS地图SDK隐私合规接口添加

1.0.55

-- 安卓marker图标大小适应分辨率

1.0.56

-- 安卓 增加RoutePlanSearchModule，增加drivingSearch方法

1.0.57

-- 安卓 优化PoiSearch两个方法loadIndex替换为pageIndex，增加pageSize export namespace PoiSearch{ export function searchInCity(city: string, keyword: string, pageIndex: number, pageSize:number, cityLimit: boolean, scope: number); export function searchNearby(keyword: string, latLng: Location, radius: number, pageIndex: number, pageSize:number, cityLimit: boolean, scope: number); }

1.0.58

-- MapApp openDrivingRoute(start, end) { module.openDrivingRoute(start, end); } openTransitRoute(start, end) { module.openTransitRoute(start, end); } openWalkNavi(start, end) { module.openWalkNavi(start, end); }

1.0.59

• 增加PoiSearch SuggestionSearch

1.0.61

• iOS设置circle功能优化，颜色转换方法调整

1.0.64

• android 增加设置坐标坐标系类型，获取坐标系类型，以及坐标转换

1.0.65

• iOS 增加设置坐标坐标系类型，获取坐标系类型，以及坐标转换
• iOS 增加RoutePlanSearchModule，增加drivingSearch方法
• iOS 增加实现 openPoiNearbySearch openPoiDetialsPage

1.0.68

• Geolocation 增加 setCoordType getCoordType

1.0.70

• iOS MapView 内存优化