地图
百度地图的环境配置这里就不过多介绍，在简书里搜索react-native-baidu-map就一大堆。而且都写的不错，自愧不如。就不在这里写了。今天我们来聊聊react-native-baidu-map一些自己遇到的坑。
有些坑，issue是可以帮到你的。
之前项目中用到了百度地图。只是需要地位功能。因此我只是将环境配置放入。当然拉，在环境配置上，也遇到大大小小的问题。最大的坑就是上头只给了我一个key还是安卓的。而我的运行环境是mac机上。运行了老半天了，一直发现，地图无法显示。。。啊。多么痛的领悟。一定要有两个key，一个安卓key，一个ioskey。很多人会在react-native-baidu-map遇到大大小小的问题。当然issue是可以帮助到你的。很多人会在issue上问问题。很多的问题，你可以找到答案和解决的方案。
有些坑，issue、baidu、google也帮不到你。
就好比项目中有这样的需求，改变指针也就是地图属性中的markers，然后让地图重新定位，定位之后访问接口，请求参数，得到离你附近最近的“building”。
自己造了一些假数据-需求如图所示：
这是ios的显示效果，和预期的效果非常的相似，我以为我的功能就这么轻轻松松的实现，其实不然，在android上却遇到了一个巨大的坑。
android上会报错“Error while updating property 'markers' of a viewmanaged by:RCTBaiduMapView”大致是这样的。说的是在更新组件markers的时候RCTBaiduMapView这里控制不了这个marker。尝试了一下午，也看了很多他人写的，基本都是跑demo。也在issue，当然拉，也没得到回复。我就想，是不是在改变marker的时候一定要带着其他的参数一起呢。
果不其然。
总结如下
- 不要在this.state 里定义 center marker 和 markers。
- 在给到marker进行setState的时候需要带入参数，center和zoom。
- geocode（city，address）方法是通过传入参数得到经纬度，这里的经纬度是string类型。而需要的参数是num类型，需要通过parseFloat（）的方法转化一下。如果需要精确到多少位，也可以使用NumObject.toFixed()方法。
- 前两点在android的时候需要特别注意。
this.state = {
mayType: MapTypes.NORMAL,
zoom: 15,
trafficEnabled: false,
baiduHeatMapEnabled: false,
};
在componentWillMount()方法里获取并且定义地址。
componentWillMount(){
var promise = Geolocation.geocode(city,address).then((data)=>{
this.setState({
zoom:18,
markers:[
{
longitude:parseFloat(data.longitude),
latitude:parseFloat(data.latitude),
title:'当前位置',
}
],
center:{
longitude:parseFloat(data.longitude),
latitude:parseFloat(data.latitude)
},
}).catch((error)=>{console.log(error)})}
在render里。通过点击 ，实现标志点的移动和重定位。
<MapView
trafficEnabled={this.state.trafficEnabled}
baiduHeatMapEnabled={this.state.baiduHeatMapEnabled}
zoom={this.state.zoom}
mapType={this.state.mapType}
center={this.state.center}
markers={this.state.markers}
style={styles.map}
//点击获得当前的地址。
onMapClick={(e)=>{
let json = JSON.stringify(e);
this.setState({
zoom:15,
markers:[
{
longitude:e.longitude ,
latitude: e.latitude,
title:'当前位置',
}
],
center:{
longitude:e.longitude ,
latitude: e.latitude,
},
})
let param = {
longitude:e.longitude ,
latitude: e.latitude,
}
DeviceEventEmitter.emit('krislee',param);
}}
>
</MapView>
地图这个功能不管在web还是app都是非常需要下功夫去好好研究的东西。之后有什么分享的，我也会写出一起分享。有不对的地方，希望大神可以指点出来。
