附地址：https://github.com/lovebing/react-native-baidu-map
1捍靠、申請(qǐng)秘鑰
地址：http://lbsyun.baidu.com/apiconsole/key
創(chuàng)建應(yīng)用.png
應(yīng)用名稱：隨意
發(fā)布版SHA1沐旨，找到my-release-key.keystore文件目錄
keytool -list -v -keystore my-release-key.keystore
附簽署應(yīng)用： https://reactnative.cn/docs/0.51/signed-apk-android.html#content
包名：
image.png
2、安裝
npm install react-native-baidu-map --save
react-native link react-native-baidu-map
檢查link
android/app/build.gradle
compile project(':react-native-baidu-map')
android/settings.gradle
include ':react-native-baidu-map'
project(':react-native-baidu-map').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-baidu-map/android')
MainApplication.java
import org.lovebing.reactnative.baidumap.BaiduMapPackage;
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new BaiduMapPackage(getApplicationContext())
);
}
AndroidManifest.xml (權(quán)限這里一定注意剂公，否則地圖只會(huì)顯示網(wǎng)格)
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<!-- 獲取網(wǎng)絡(luò)狀態(tài) -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<!-- 這個(gè)權(quán)限用于訪問(wèn)GPS定位-->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<!-- 用于訪問(wèn)wifi網(wǎng)絡(luò)信息希俩，wifi信息會(huì)用于進(jìn)行網(wǎng)絡(luò)定位-->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<!-- 放在application下面-->
<meta-data android:name="com.baidu.lbsapi.API_KEY" android:value="剛申請(qǐng)的秘鑰"/>
3、構(gòu)建
引入
import {
MapView,
MapTypes,
Geolocation
} from 'react-native-baidu-map';
state = {
mayType: MapTypes.NORMAL,
zoom: 15,
center: {
longitude: 113.981718,
latitude: 22.542449
},
trafficEnabled: false,
baiduHeatMapEnabled: false,
markers: []
};
componentDidMount() { // 獲取位置
Geolocation.getCurrentPosition().then(
(data) => {
this.setState({
zoom: 18,
markers: [{
latitude: data.latitude,
longitude: data.longitude,
title: '我的位置'
}],
center: {
latitude: data.latitude,
longitude: data.longitude
}
})
}
).catch(error => {
console.warn(error, 'error')
})
}
<MapView trafficEnabled={this.state.trafficEnabled} baiduHeatMapEnabled={this.state.baiduHeatMapEnabled} zoom={this.state.zoom} mapType={this.state.mapType} center={this.state.center marker={this.state.marker} markers={this.state.markers} style={{height:400}}
onMarkerClick={(e) => {
console.warn(JSON.stringify(e));
}}
onMapClick={(e) => {
}}>
</MapView>
可能遇到的問(wèn)題：
Cannot read property 'bool' of undefined
// 解決辦法
//修改node_modules\react-native-baidu-map/js/MapView.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
// 錯(cuò)誤：方法不會(huì)覆蓋或?qū)崿F(xiàn)超類型的方法
// 解決辦法：node_modules\react-native-baidu-map/android../BaiduMapPackage.java中createJSModules方法的@Override干掉
真機(jī)纲辽、模擬器可能只顯示網(wǎng)格颜武，打包應(yīng)該是就可以了的
顯示結(jié)果.png
