android componentname 百度地图,react native android百度地图定位

使用百度地图进行定位，我选择的插件是：react-native-baidu-map

github地址：https://github.com/lovebing/react-native-baidu-map

样例：

图片.png

此处我只写了配置Android的教程，需要ios配置的可以移步至：http://www.jianshu.com/p/eceb7e66fa5e ，作者写的很详细。

配置步骤：

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

setting.gradle.png

App/build.gradle

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

build.gradle .png

MainApplication

new BaiduMapPackage(getApplicationContext())

图片.png

除此之外，别忘了将包导进来：不过一般都会自动导进来。

MainApplication

import org.lovebing.reactnative.baidumap.BaiduMapPackage;

图片.png

AndroidMainifest.xml

开启权限：

android:value=“你所申请的百度地图AK”/>

图片.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 (

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) => {

}}

>

);

}

}

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,

}

});