react native android 定位,React-Native-Android使用百度地图

最新推荐文章于 2025-11-15 18:04:09 发布

转载最新推荐文章于 2025-11-15 18:04:09 发布 · 477 阅读

文章标签：

#react native android 定位

本文详细介绍了如何在React Native项目中通过Android SDK获取百度地图Key，创建应用并配置关键组件，如地图展示、定位和热力图。展示了如何在`BaiduLocationTest`组件中实现位置信息获取和地图操作。

百度地图key值

进入百度地图->API控制台，创建应用，应用类型选择Android SDK，输入发布版SHA1和包名提交即可

87452706b65b

申请百度地图key

显示地图及定位

NPM install

npm install react-native-baidu-map --save

android/setting.gradle:

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:

compile project(':react-native-baidu-map')

MainApplication.java:

import org.lovebing.reactnative.baidumap.BaiduMapPackage;

return Arrays.asList(

...

, new BaiduMapPackage(getApplicationContext())

...

AndroidManifest.xml:

android:name=".MainApplication"

android:allowBackup="true"

android:label="@string/app_name"

android:icon="@mipmap/ic_launcher"

android:theme="@style/AppTheme">

android:name="com.baidu.lbsapi.API_KEY"

android:value="baidu-key"/>

...

Usage

import React, { Component } from 'react';

import {

View,

Text,

TouchableHighlight,

StyleSheet,

InteractionManager,

Dimensions,

Platform,

StatusBar,

NativeAppEventEmitter,

Alert,

} from 'react-native';

import { Button } from 'antd-mobile';

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

class BaiduLocationTest extends Component {

constructor(props) {

super(props);

this.state = {

mayType: MapTypes.NORMAL,

zoom: 15,

center: {

longitude: 113.981718,

latitude: 22.542449

trafficEnabled: false,

baiduHeatMapEnabled: false,

markers: [{

longitude: 113.981718,

latitude: 22.542449,

title: "Window of the world"

},{

longitude: 113.995516,

latitude: 22.537642,

title: ""

}]

};

this.timer = null;

}

componentDidMount() {

}

componentWillUnmount () {

this.timer && clearInterval(this.timer);

}

getLocation = () => {

this.timer = setInterval(

() => {

Geolocation.getCurrentPosition()

.then(data => {

console.log(JSON.stringify(data));

this.setState({

marker: {

latitude: data.latitude,

longitude: data.longitude,

title: 'Your location'

center: {

latitude: data.latitude,

longitude: data.longitude,

rand: Math.random()

}

});

})

.catch(e =>{

console.warn(e, 'error');

})

2000

);

}

render() {

return (

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={styles.map}

onMarkerClick={(e) => {

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

}}

onMapClick={(e) => {

}}

获取位置信息

);

}

const styles = StyleSheet.create({

button: {

margin: 20,

row: {

flexDirection: 'row',

height: 40

container: {

flex: 1,

justifyContent: 'flex-start',

alignItems: 'center',

backgroundColor: '#F5FCFF',

map: {

width: Dimensions.get('window').width,

height: Dimensions.get('window').height - 200,

marginBottom: 16

}

});

export default BaiduLocationTest;

87452706b65b

百度地图

87452706b65b

位置信息