react native android百度地图定位
2023-09-27 14:29:02 时间
http://www.jianshu.com/p/7ca4d7acb6d2
使用百度地图进行定位,我选择的插件是:react-native-baidu-map
github地址:https://github.com/lovebing/react-native-baidu-map
样例:
![](http://upload-images.jianshu.io/upload_images/4515774-338425cf6b103570.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
图片.png
配置步骤:
1、导入
npm install react-native-baidu-map --save
2、link
react-native link react-native-baidu-map
3、配置
有时候link可能没起作用,或者link只自动配置了一半而没有配全,所以我们需要手动去检查一些是否都配置全了,去过没有配置全,还需手动去配置。
setting.gradle
include ':react-native-baidu-map' project(':react-native-baidu-map').projectDir = new File(settingsDir, '../node_modules/react-native-baidu-map/android’)
![](http://upload-images.jianshu.io/upload_images/4515774-0f58897f81fb917d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
setting.gradle.png
App/build.gradle
compile project(':react-native-baidu-map')
![](http://upload-images.jianshu.io/upload_images/4515774-f9fde253f2364797.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
build.gradle .png
MainApplication
new BaiduMapPackage(getApplicationContext())
![](http://upload-images.jianshu.io/upload_images/4515774-4c6911ccb5155007.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
图片.png
除此之外,别忘了将包导进来:不过一般都会自动导进来。
MainApplication
import org.lovebing.reactnative.baidumap.BaiduMapPackage;
![](http://upload-images.jianshu.io/upload_images/4515774-6f50801a01099fea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
图片.png
AndroidMainifest.xml
开启权限:
<!-- 访问GPS定位 -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<!-- 网络定位-->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<!-- 用于访问wifi网络信息,wifi信息会用于进行网络定位-->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE” />
配置百度地图AK:
<meta-data
android:name="com.baidu.lbsapi.API_KEY"
android:value=“你所申请的百度地图AK”/>
![](http://upload-images.jianshu.io/upload_images/4515774-42b6fb52d97d13cf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
图片.png
申请百度地图AK可参考:http://www.jianshu.com/p/2e2c562a2275
现在所有的配置都已经完成了,我们就可以进行百度地图定位了。
BaiduMap.js
import React, {
Component,
PropTypes
} from 'react';
import {
MapView,
MapTypes,
Geolocation
} from 'react-native-baidu-map';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight
} from 'react-native';
import styles from './styles';
export default class BaiduMap extends Component {
constructor() {
super();
this.state = {
mayType: MapTypes.NORMAL,
zoom: 15,
trafficEnabled: false,
baiduHeatMapEnabled: false,
};
}
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')
})
}
render() {
return (
<View style={styles.container}>
<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={styles.map}
onMapClick={(e) => {
}}
>
</MapView>
</View>
);
}
}
styles.js
'use strict';
import { StyleSheet } from "react-native";
module.exports = StyleSheet.create({
container: {
flex: 1,
height:400,
flexDirection:'row',
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
map: {
flex:1,
height:400,
}
});
相关文章
- Android学习笔记————利用JDBC连接服务器数据库
- 百度Android开发工具存漏洞 数千款应用受影响
- 1-3年Android开发工程师面试经验分享,安卓系列学习进阶视频
- android中使用百度定位sdk实时的计算移动距离
- 一个五年 Android 开发者百度、阿里、聚美、映客的面试心经
- android中支持多种文件类型的下载类
- 超经典,百度最爱考的安卓Android百题
- Android Studio系列教程三--快捷键
- Android中使用ProgressBar实现进度条
- Android 以apk包方式共享资源(动态换肤)的实现方式
- Android ADB开发常用命令总结
- Android上使用camera拍照,把获取的照片上传到远程服务器
- 【Android CPU 优化】Android CPU 调优 ( Trace 文件分析 | Android Profiler 工具 | CPU Profiler 工具 )
- 首次构建android studio gradle 下载缓慢的问题
- android使用百度地图SDK 去掉百度Logo的小技巧
- 我的Android进阶之旅------>Android百度地图定位SDK功能学习