android模拟器 百度地图,react-native 百度地图(Android)

1、申请秘钥

创建应用.png

应用名称：随意

发布版SHA1，找到my-release-key.keystore文件目录

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

包名：

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 getPackages() {

return Arrays.asList(

new BaiduMapPackage(getApplicationContext())

);

}

AndroidManifest.xml (权限这里一定注意，否则地图只会显示网格)

3、构建

引入

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')

})

}

onMarkerClick={(e) => {

console.warn(JSON.stringify(e));

}}

onMapClick={(e) => {

}}>

可能遇到的问题：

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';

// 错误：方法不会覆盖或实现超类型的方法

// 解决办法：node_modules\react-native-baidu-map/android../BaiduMapPackage.java中createJSModules方法的@Override干掉

真机、模拟器可能只显示网格，打包应该是就可以了的

显示结果.png