react-native-lbs-baidu

🌍 基于百度地图 SDK 的 React Native 定位模块，支持 Android 和 iOS 平台。

特性

• ✅ 支持 Android 和 iOS 双平台
• ✅ 基于 React Native 新架构（TurboModule）
• ✅ 支持逆地理编码（地址解析）
• ✅ Promise-based API，使用简单
• ✅ TypeScript 支持
• ✅ 自动隐私合规处理

安装

1. 安装依赖

npm install react-native-lbs-baidu
# 或
yarn add react-native-lbs-baidu

2. iOS 配置

安装 iOS 依赖

cd ios && pod install

配置隐私权限

在 ios/YourProject/Info.plist 中添加定位权限说明：

<key>NSLocationWhenInUseUsageDescription</key>
<string>需要访问您的位置信息以提供定位服务</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>需要访问您的位置信息以提供定位服务</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>需要访问您的位置信息以提供定位服务</string>

申请百度地图 AK

前往 百度地图开放平台 申请 iOS 端的 AK。

注意：iOS 需要填写 Bundle Identifier。

3. Android 配置

配置权限

在 android/app/src/main/AndroidManifest.xml 中添加权限：

<!-- 百度定位所需权限 -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />

申请百度地图 AK

前往 百度地图开放平台 申请 Android 端的 AK。

注意：Android 需要填写应用包名和 SHA1 签名。

使用方法

基础用法

import { Platform } from 'react-native';
import GeoLocation, { type LocationInfo } from 'react-native-lbs-baidu';

// 1. 初始化百度定位 SDK
GeoLocation.initLbsBaidu(
  Platform.OS === 'android' 
    ? 'YOUR_ANDROID_AK' 
    : 'YOUR_IOS_AK'
);

// 2. 开始定位（返回 Promise）
GeoLocation.startLocation()
  .then((location: LocationInfo) => {
    console.log('定位成功:', location);
  })
  .catch((error) => {
    console.error('定位失败:', error);
  });

// 3. 停止定位（可选）
GeoLocation.stopLocation();

完整示例

import { useState } from 'react';
import { View, Text, Button, Platform, StyleSheet } from 'react-native';
import GeoLocation, { type LocationInfo } from 'react-native-lbs-baidu';

export default function App() {
  const [location, setLocation] = useState<LocationInfo | null>(null);
  const [loading, setLoading] = useState(false);

  const handleInit = () => {
    GeoLocation.initLbsBaidu(
      Platform.OS === 'android'
        ? 'YOUR_ANDROID_AK'
        : 'YOUR_IOS_AK'
    );
  };

  const handleStartLocation = async () => {
    setLoading(true);
    try {
      const loc = await GeoLocation.startLocation();
      console.log('定位成功:', loc);
      setLocation(loc);
    } catch (error) {
      console.error('定位失败:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <View style={styles.container}>
      <Button title="初始化" onPress={handleInit} />
      <Button 
        title={loading ? "定位中..." : "开始定位"} 
        onPress={handleStartLocation}
        disabled={loading}
      />
      
      {location && (
        <View style={styles.locationInfo}>
          <Text style={styles.title}>定位信息：</Text>
          <Text>地址：{location.address}</Text>
          <Text>国家：{location.country}</Text>
          <Text>省份：{location.province}</Text>
          <Text>城市：{location.city}</Text>
          <Text>区县：{location.district}</Text>
          <Text>街道：{location.street}</Text>
          <Text>行政区划代码：{location.adcode}</Text>
          <Text>乡镇：{location.town}</Text>
          <Text>经度：{location.longitude}</Text>
          <Text>纬度：{location.latitude}</Text>
          <Text>定位类型：{location.locType}</Text>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  locationInfo: {
    marginTop: 20,
    padding: 10,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
    width: '100%',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
  },
});

API 文档

Methods

initLbsBaidu(key: string): void

初始化百度定位 SDK。

参数：

• key: 百度地图 AK（Android 和 iOS 的 AK 不同）

示例：

GeoLocation.initLbsBaidu('YOUR_BAIDU_MAP_AK');

startLocation(): Promise<LocationInfo>

开始定位，返回包含位置信息的 Promise。

返回值：

• Promise<LocationInfo>: 包含详细位置信息的 Promise

示例：

GeoLocation.startLocation()
  .then((location) => {
    console.log('定位成功:', location);
  })
  .catch((error) => {
    console.error('定位失败:', error);
  });

stopLocation(): void

停止定位。

示例：

GeoLocation.stopLocation();

数据类型

LocationInfo

位置信息接口。

interface LocationInfo {
  address: string;      // 详细地址
  country: string;      // 国家
  province: string;     // 省份
  city: string;         // 城市
  district: string;     // 区县
  street: string;       // 街道
  adcode: string;       // 行政区划代码
  town: string;         // 乡镇
  latitude: number;     // 纬度
  longitude: number;    // 经度
  locType?: number;     // 定位类型（仅 Android）
}

注意事项

Android

1. 权限请求：在 Android 6.0+ 需要动态请求定位权限
2. SHA1 签名：在百度地图控制台配置 SHA1 时，需要使用实际打包签名的 SHA1
3. 定位类型说明（locType）：
   • 61: GPS 定位
   • 66: 离线定位
   • 161: 网络定位
   • 更多类型请参考百度定位 SDK 文档

iOS

1. Info.plist 配置：必须添加定位权限说明，否则无法使用定位功能
2. AK 配置：iOS 的 AK 需要在百度地图控制台绑定正确的 Bundle Identifier
3. 隐私协议：SDK 已自动调用 setAgreePrivacy:YES，符合隐私合规要求

常见问题

定位失败怎么办？

1. 检查是否正确配置了百度地图 AK
2. 检查 AK 是否对应正确的平台（Android/iOS）
3. Android 检查 SHA1 签名是否正确
4. iOS 检查 Bundle Identifier 是否正确
5. 检查设备定位权限是否开启
6. 查看控制台日志，检查是否有错误信息

如何获取 SHA1 签名？

调试版本：

cd android && ./gradlew signingReport

发布版本：

keytool -list -v -keystore your-release-key.keystore

SDK 版本

• Android: 百度定位 SDK 9.6.6.1
• iOS: BMKLocationKit 2.1.3

依赖项

• React Native >= 0.81.0
• Android minSdkVersion: 21
• iOS Deployment Target: 12.4
• 支持 React Native 新架构（TurboModule）

贡献

欢迎贡献代码！请查看 贡献指南。

开发

查看详细的开发流程：开发工作流

License

MIT

Made with create-react-native-library

相关链接

• 百度地图开放平台
• 百度定位 Android SDK
• 百度定位 iOS SDK