react-native-baidu-map使用及注意問題

使用組件：

react-native-baidu-map

獲取百度地圖API_KEY

地址：http://lbsyun.baidu.com，在控制檯成功建立應用後，就能夠看到應用的api key了

安裝

yarn add react-native-baidu-map

原生部分

Android配置

react-native link react-native-baidu-map

配置AndroidManifest.xml文件

1.在<application>中加入以下代碼配置開發密鑰（AK）

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

2.在<application/>外部添加以下權限聲明：

//獲取設備網絡狀態，禁用後沒法獲取網絡狀態
<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;

<MapView
         width={deviceWidth}
         height={200}
         zoom={18}
         trafficEnabled={true}
         zoomControlsVisible={true}
         mapType={MapTypes.SATELLITE}
         center={{ longitude: 116.465175, latitude: 39.938522 }}
>
        <Marker
            title='中心'
            location={{longitude: 116.465175, latitude: 39.938522}}
          />
</MapView>

效果，上圖

個人網站：https://wayne214.github.io