react-native 使用百度地图

先到百度地图创建应用：

申请开发版SHA1：

打开终端，输入命令：cd .android，回车继续输入以下命令

keytool -list -v -keystore debug.keystore  

口令默认为 android

 

得到开发版 SHA1

 

发布版 SHA1：以 Android Stutio 为例(Keytool生成看最下面)：

打开 build => Generate Signed APK

选择新建：

一路 next  最后 finish，在项目 android/app 下生成一个 .keystore 文件

继续在命令行中输入 

keytool -list -v -keystore   apk的keystore(文件路径)

得到发布版 SHA1:

 

Keytool -genkey -alias my-release-keystore.keystore -keyalg RSA -validity 20000 -keystore my-release-keystore.keystore

keytool工具是Java JDK自带的证书工具
-genkey参数表示：要生成一个证书（版权、身份识别的安全证书）
-alias参数表示：证书有别名，-alias fantongyo.keystore表示证书别名为:my-release-keystore
-keyalg RSA表示加密类型，RSA表示需要加密，以防止别人盗取
-validity 20000表示有效时间20000天
-keystore my-release-keystore.keystore表示要生成的证书名称为my-release-keystore

--------------------------------------------------------------------------------------------

输入命令：Keytool -genkey -alias my-release-keystore.keystore -keyalg RSA -validity 20000 -keystore my-release-keystore.keystore，到最后提示keytool 错误: java.io.FileNotFoundException: MyAndroidKey.keystore (Permission denied).

原因：缺少权限

方法一更改保存目录：就是讲jdk从c盘挪到其它盘。

方法二更改权限：以管理员身份运行CMD，MAC 下添加 sudo 

sudo Keytool -genkey -alias my-release-keystore.keystore -keyalg RSA -validity 20000 -keystore my-release-keystore.keystore

 

安装 npm i react-native-baidu-map --save

android配置：

在项目的 android/settings.gradle目录 下添加：

[code]include ':react-native-baidu-map'
project(':react-native-baidu-map').projectDir = new File(settingsDir, '../node_modules/react-native-baidu-map/android')

 在android/app/build.gradle 中添加

[code]    signingConfigs {
release {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
buildTypes {
release {
...
signingConfig signingConfigs.release
}
}
dependencies {
implementation project(':react-native-baidu-map') // 添加的一行
...
}

在gradle.properties中添加

[code]MYAPP_RELEASE_STORE_FILE=my-release-keystore.keystore
MYAPP_RELEASE_KEY_ALIAS=my-release-keystore.keystore (和自己之前起的文件名要一致)
MYAPP_RELEASE_STORE_PASSWORD=****** （自己设置的密码）
MYAPP_RELEASE_KEY_PASSWORD=******

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

[code]    <!-- 这个权限用于进行网络定位-->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission>
<!-- 这个权限用于访问GPS定位-->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>
<!-- 用于访问wifi网络信息，wifi信息会用于进行网络定位-->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission>
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />
<uses-permission android:name="android.permission.WAKE_LOCK"/>
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_SETTINGS" />

<application
...
<meta-data
android:name="com.baidu.lbsapi.API_KEY"
android:value="I03Xwhn5L3uVBrYSRfG8KzSrSZQkaM8h"/> // 申请到的baidu地图app key
...
</application>

MainApplication.java 中添加：

[code]    import org.lovebing.reactnative.baidumap.BaiduMapPackage; //添加

protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new BaiduMapPackage(getApplicationContext())
);
}

在node_modules/react-native-baidu-map中修改 MapView.js

[code]修改前：
import React, {
Component,
PropTypes
} from 'react';

修改后：
import React, {
Component,
} from 'react';
import PropTypes from 'prop-types'

在node_modules/react-native-baidu-map/android 下修改 BaiduMapPackage.java

删除或注释第 49 行的：@Override

 

ios 配置：

1、Project navigator->Libraries->Add Files to 选择 react-native-baidu-map/ios/RCTBaiduMap.xcodeproj

2、Project navigator->Build Phases->Link Binary With Libraries 加入 libRCTBaiduMap.a

继续添加依赖，点击 Add Other：

 

3、Project navigator->Build Settings->Search Paths， Framework search paths 添加 react-native-baidu-map/ios/lib，Header search paths 添加 react-native-baidu-map/ios/RCTBaiduMap

4、添加依赖, react-native-baidu-map/ios/lib 下的全部 framwordk， CoreLocation.framework和QuartzCore.framework、OpenGLES.framework、SystemConfiguration.framework、CoreGraphics.framework、Security.framework、libsqlite3.0.tbd（xcode7以前为 libsqlite3.0.dylib）、CoreTelephony.framework 、libstdc++.6.0.9.tbd（xcode7以前为libstdc++.6.0.9.dylib）

添加方法同第二步，

5、添加 BaiduMapAPI_Map.framework/Resources/mapapi.bundle

将node_modules/react-native-baidu-map/ios/lib/BaiduMapAPI_Map.framework/Resources/mapapi.bundle拖进xcode与项目同名的文件夹下

6、AppDelegate.m init 初始化

#import "RCTBaiduMapViewManager.h"

//百度地图

  [RCTBaiduMapViewManager initSDK:@"api key"];

 

1、error: Redefinition of ‘RCTMethodInfo’ :

2、error: 'RCTViewManager.h' file not found

 

js代码：

[code]import React, { Component } from 'react';

import {
StyleSheet,
Text,
View,
ScrollView,
Platform,
} from 'react-native';

import { MapView,MapTypes,Geolocation} from 'react-native-baidu-map';

import Dimensions from 'Dimensions';
const { width,height } = Dimensions.get('window');

export default class BaiduMapDemo extends Component {
constructor() {
super();
this.state = {
zoomControlsVisible: true,
trafficEnabled: false,
baiduHeatMapEnabled: false,
mapType: MapTypes.NORMAL,
zoom: 15,
center: {
longitude: 113.896198,
latitude: 22.959144,
},
markers: [
{
longitude: 113.896198,
latitude: 22.959144,
title: 'title',
}
],
clickMessage: '',
poiMessage: '',
};
}

componentDidMount() {

}

render() {
return (
<ScrollView style={styles.container}>
<MapView
zoomControlsVisible={this.state.zoomControlsVisible} //默认true,是否显示缩放控件,仅支持android
trafficEnabled={this.state.trafficEnabled} //默认false,是否显示交通线
baiduHeatMapEnabled={this.state.baiduHeatMapEnabled} //默认false,是否显示热力图
mapType={this.state.mapType} //地图模式,NORMAL普通 SATELLITE卫星图
zoom={this.state.zoom} //缩放等级,默认为10
center={this.state.center} // 地图中心位置
markers={this.state.markers} //地图多个标记点

onMapLoaded={(e) => { //地图加载事件
Geolocation.getCurrentPosition()
.then(data => {
console.log(data)
// this.setState({
//     center: {
//         longitude: data.longitude,
//         latitude: data.latitude
//     },
//     markers: [{
//         longitude: data.longitude,
//         latitude: data.latitude,
//         title: data.district + data.street
//     }]
// })
})
.catch(e =>{
console.warn(e, 'error');
})
}}

onMarkerClick={(e) => { //标记点点击事件
console.log(e)
}}
onMapClick={(e) => { //地图空白区域点击事件,返回经纬度
let title = '';
Geolocation.reverseGeoCode(e.latitude,e.longitude)
.then(res => {
console.log(res)
Platform.OS == 'ios' ?
title = res.district + res.streetName
:
title = res.district + res.street;
this.setState({
center: {
longitude: e.longitude,
latitude: e.latitude,
},
markers: [{
longitude: e.longitude,
latitude: e.latitude,
title: title,
}],
clickMessage: JSON.stringify(res)
})
})
.catch(err => {
console.log(err)
})

}}
onMapPoiClick={(e) => { //地图已有点点击
Geolocation.reverseGeoCode(e.latitude,e.longitude)
.then(res => {
res = JSON.stringify(res)
this.setState({
center: {
longitude: e.longitude,
latitude: e.latitude,
},
markers: [{
longitude: e.longitude,
latitude: e.latitude,
title: e.name,
}],
poiMessage: res
})
})
.catch(err => {
console.log(err)
})
}}
style={styles.map}
>
</MapView>

<View style={styles.list}>
<Text>地图缩放控件状态: </Text>
{this.state.zoomControlsVisible ?
<Text onPress={() => this.setState({zoomControlsVisible:false})}>显示</Text>
:
<Text onPress={() => this.setState({zoomControlsVisible:true})}>关闭</Text>
}
</View>
<View style={styles.list}>
<Text>交通线状态: </Text>
{this.state.trafficEnabled ?
<Text onPress={() => this.setState({trafficEnabled:false})}>显示</Text>
:
<Text onPress={() => this.setState({trafficEnabled:true})}>关闭</Text>
}
</View>
<View style={styles.list}>
<Text>热力图状态: </Text>
{this.state.baiduHeatMapEnabled ?
<Text onPress={() => this.setState({baiduHeatMapEnabled:false})}>显示</Text>
:
<Text onPress={() => this.setState({baiduHeatMapEnabled:true})}>关闭</Text>
}
</View>
<View style={styles.list}>
<Text>地图模式状态: </Text>
{this.state.mapType == MapTypes.NORMAL ?
<Text onPress={() => this.setState({mapType:MapTypes.SATELLITE})}>普通</Text>
:
<Text onPress={() => this.setState({mapType:MapTypes.NORMAL})}>卫星</Text>
}
</View>
<View style={styles.list}>
<Text>地图空白区域点击信息: </Text>
</View>
<View style={styles.list}>
<Text>{this.state.clickMessage}</Text>
</View>
<View style={styles.list}>
<Text>地图已有点点击信息: </Text>
</View>
<View style={styles.list}>
<Text>{this.state.poiMessage}</Text>
</View>
<View style={styles.list}>
<Text onPress={() => {
Geolocation.getCurrentPosition()
.then(data => {
console.log(data)
this.setState({
center: {
longitude: data.longitude,
latitude: data.latitude
},
markers: [{
longitude: data.longitude,
latitude: data.latitude,
title: data.district + data.street
}]
})
})
.catch(e =>{
console.warn(e, 'error');
})
}}>当前位置</Text>
</View>
</ScrollView>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
map: {
width: width,
height: height - 300,
marginBottom: 5,
},
list: {
flexDirection: 'row',
paddingLeft: 10,
marginBottom: 5,
}
});

 

ios效果图：

android效果图：

 

 

阅读更多