地圖
百度地圖的環(huán)境配置這里就不過多介紹，在簡書里搜索react-native-baidu-map就一大堆腻菇。而且都寫的不錯(cuò)园细，自愧不如惦积。就不在這里寫了。今天我們來聊聊react-native-baidu-map一些自己遇到的坑猛频。
有些坑狮崩，issue是可以幫到你的蛛勉。
之前項(xiàng)目中用到了百度地圖。只是需要地位功能厉亏。因此我只是將環(huán)境配置放入董习。當(dāng)然拉，在環(huán)境配置上爱只，也遇到大大小小的問題皿淋。最大的坑就是上頭只給了我一個(gè)key還是安卓的。而我的運(yùn)行環(huán)境是mac機(jī)上恬试。運(yùn)行了老半天了窝趣，一直發(fā)現(xiàn)，地圖無法顯示训柴。哑舒。。啊幻馁。多么痛的領(lǐng)悟洗鸵。一定要有兩個(gè)key，一個(gè)安卓key仗嗦，一個(gè)ioskey膘滨。很多人會(huì)在react-native-baidu-map遇到大大小小的問題。當(dāng)然issue是可以幫助到你的稀拐。很多人會(huì)在issue上問問題火邓。很多的問題，你可以找到答案和解決的方案德撬。
有些坑铲咨，issue、baidu蜓洪、google也幫不到你纤勒。
就好比項(xiàng)目中有這樣的需求，改變指針也就是地圖屬性中的markers隆檀，然后讓地圖重新定位踊东，定位之后訪問接口，請(qǐng)求參數(shù)刚操，得到離你附近最近的“building”闸翅。
自己造了一些假數(shù)據(jù)-需求如圖所示：
這是ios的顯示效果，和預(yù)期的效果非常的相似菊霜，我以為我的功能就這么輕輕松松的實(shí)現(xiàn)坚冀，其實(shí)不然，在android上卻遇到了一個(gè)巨大的坑鉴逞。
android上會(huì)報(bào)錯(cuò)“Error while updating property 'markers' of a viewmanaged by:RCTBaiduMapView”大致是這樣的记某。說的是在更新組件markers的時(shí)候RCTBaiduMapView這里控制不了這個(gè)marker司训。嘗試了一下午，也看了很多他人寫的液南，基本都是跑demo壳猜。也在issue，當(dāng)然拉滑凉，也沒得到回復(fù)统扳。我就想，是不是在改變marker的時(shí)候一定要帶著其他的參數(shù)一起呢畅姊。
果不其然咒钟。
總結(jié)如下
- 不要在this.state 里定義 center marker 和 markers。
- 在給到marker進(jìn)行setState的時(shí)候需要帶入?yún)?shù)若未，center和zoom朱嘴。
- geocode（city，address）方法是通過傳入?yún)?shù)得到經(jīng)緯度粗合，這里的經(jīng)緯度是string類型萍嬉。而需要的參數(shù)是num類型，需要通過parseFloat（）的方法轉(zhuǎn)化一下隙疚。如果需要精確到多少位壤追，也可以使用NumObject.toFixed()方法。
- 前兩點(diǎn)在android的時(shí)候需要特別注意甚淡。
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:'當(dāng)前位置',
}
],
center:{
longitude:parseFloat(data.longitude),
latitude:parseFloat(data.latitude)
},
}).catch((error)=>{console.log(error)})}
在render里捅厂。通過點(diǎn)擊 贯卦，實(shí)現(xiàn)標(biāo)志點(diǎn)的移動(dòng)和重定位。
<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}
//點(diǎn)擊獲得當(dāng)前的地址焙贷。
onMapClick={(e)=>{
let json = JSON.stringify(e);
this.setState({
zoom:15,
markers:[
{
longitude:e.longitude ,
latitude: e.latitude,
title:'當(dāng)前位置',
}
],
center:{
longitude:e.longitude ,
latitude: e.latitude,
},
})
let param = {
longitude:e.longitude ,
latitude: e.latitude,
}
DeviceEventEmitter.emit('krislee',param);
}}
>
</MapView>
地圖這個(gè)功能不管在web還是app都是非常需要下功夫去好好研究的東西撵割。之后有什么分享的，我也會(huì)寫出一起分享辙芍。有不對(duì)的地方啡彬，希望大神可以指點(diǎn)出來。
