使用組件：

react-native-baidu-map

獲取百度地圖API_KEY

地址：lbsyun.baidu.com，在控制臺成功創建應用后，就可以看到應用的api key了

安裝

yarn add react-native-baidu-map 復制代碼

原生部分

Android配置

react-native link react-native-baidu-map 復制代碼

配置AndroidManifest.xml文件

1.在中加入如下代碼配置開發密鑰（AK）

<application> <meta-data android:name="com.baidu.lbsapi.API_KEY" android:value="開發者 key" /> </application> 復制代碼

2.在外部添加如下權限聲明：

//獲取設備網絡狀態，禁用后無法獲取網絡狀態 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> //網絡權限，當禁用后，無法進行檢索等相關業務 <uses-permission android:name="android.permission.INTERNET" /> //讀取設備硬件信息，統計數據 <uses-permission android:name="android.permission.READ_PHONE_STATE" /> //讀取系統信息，包含系統版本等信息，用作統計 <uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" /> //獲取設備的網絡狀態，鑒權所需網絡代理 <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> //允許sd卡寫權限，需寫入地圖數據，禁用后無法顯示地圖 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> //這個權限用于進行網絡定位 <uses-permission android:name="android.permission.WRITE_SETTINGS" /> //這個權限用于訪問GPS定位 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> //獲取統計數據 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> //使用步行AR導航，配置Camera權限 <uses-permission android:name="android.permission.CAMERA" /> //程序在手機屏幕關閉后后臺進程仍然運行 <uses-permission android:name="android.permission.WAKE_LOCK" /> 復制代碼

IOS配置

使用pod,Podfile文件中添加

pod 'React', :path => '../node_modules/react-native', :subspecs => ['Core','CxxBridge','DevSupport', 'RCTText','RCTNetwork','RCTWebSocket', 'RCTAnimation']pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'pod 'react-native-baidu-map', :podspec => '../node_modules/react-native-baidu-map/ios/react-native-baidu-map.podspec' 復制代碼

注意！！！：AppDelegate.m init 初始化，使用如下代碼，可以解決RCTBaiduMapViewManager.h文件找不到的問題

#import <react-native-baidu-map/BaiduMapViewManager.h> - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {...// 地圖 ak 注冊[BaiduMapViewManager initSDK:@""];... } 復制代碼

使用

導入 import { MapView, MapTypes, Geolocation, Overlay } from 'react-native-baidu-map' const { Marker } = Overlay;<MapViewwidth={deviceWidth}height={200}zoom={18}trafficEnabled={true}zoomControlsVisible={true}mapType={MapTypes.SATELLITE}center={{ longitude: 116.465175, latitude: 39.938522 }} ><Markertitle='中心'location={{longitude: 116.465175, latitude: 39.938522}}/> </MapView> 復制代碼

效果，上圖

我的網站：wayne214.github.io

轉載于:https://juejin.im/post/5ccfa261f265da03b9182be5

總結

以上是生活随笔為你收集整理的react-native-baidu-map使用及注意问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。