這篇文章主要介紹 RN 高德地圖組件 react-native-amap3d役耕，安裝過程請參考 README瓜贾。
基本使用
import {MapView} from 'react-native-amap3d'
render() {
return <MapView style={StyleSheet.absoluteFill}/>
}
設(shè)置地圖狀態(tài)
所謂的地圖狀態(tài)包括：中心坐標（coordinate）蠕嫁、縮放級別（zoomLevel）冰寻、傾斜度（titl）觉阅、旋轉(zhuǎn)角度（rotation）稻爬、顯示區(qū)域（region）嗜闻。
通過 coordinate、zoomLevel 設(shè)置顯示區(qū)域
<MapView
style={StyleSheet.absoluteFill}
coordinate={{
latitude: 39.90980,
longitude: 116.37296,
}}
zoomLevel={18}
tilt={45}
showsIndoorMap
/>
通過 region 設(shè)置顯示區(qū)域
region 由中心坐標和經(jīng)緯跨度組成桅锄，相對于 zoomLevel琉雳，region 可以精確控制顯示邊界样眠。
<MapView
style={StyleSheet.absoluteFill}
region={{
latitude: 39.90980,
longitude: 116.37296,
latitudeDelta: 0.1,
longitudeDelta: 0.1,
}}
/>
動畫過渡
通過屬性控制的地圖狀態(tài)切換會顯得比較生硬，如果希望地圖狀態(tài)切換是動畫過渡的翠肘，可以使用 animateTo 方法檐束。
<MapView ref={ref => this._mapView} style={StyleSheet.absoluteFill}/>
this._mapView.animateTo({
tilt: 45,
rotation: 90,
zoomLevel: 18,
coordinate: {
latitude: 39.97837,
longitude: 116.31363,
}
})
5種地圖模式
目前高德地圖支持5種地圖模式：
- 標準（standard）
- 衛(wèi)星（satellite）
- 導(dǎo)航（navigation）
- 公交（bus）
- 夜間（night）
<MapView
style={StyleSheet.absoluteFill}
zoomLevel={14}
mapType='satellite'
/>
衛(wèi)星地圖
導(dǎo)航地圖
公交地圖
夜間地圖
地圖事件
目前支持的地圖事件有：
-
onPress點按事件 -
onLongPress長按事件 -
onLocation定位事件 -
onStatusChange地圖狀態(tài)變化事件，變化過程會一直調(diào)用 -
onStatusChangeComplete地圖狀態(tài)變化結(jié)束事件
可以通過 event.nativeEvent 獲取事件傳遞過來的數(shù)據(jù)
定位
通過 locationEnabled 控制是否啟用定位束倍，通過 locationInterval 和 distanceFilter 可以控制定位頻次被丧。
<MapView
style={StyleSheet.absoluteFill}
locationEnabled
locationInterval={10000}
distanceFilter={10}
onLocation={({nativeEvent}) =>
console.log(`${nativeEvent.latitude}, ${nativeEvent.longitude}`)}
/>
添加標注點
默認標注點
<MapView style={StyleSheet.absoluteFill}>
<Marker
active
title='這是一個標注點'
color='red'
description='Hello world!'
coordinate={{
latitude: 39.806901,
longitude: 116.397972,
}}
/>
</MapView>
可拖拽的標注點
<Marker
draggable
onDragEnd={({nativeEvent}) =>
console.log(`${nativeEvent.latitude}, ${nativeEvent.longitude}`)}
coordinate={{
latitude: 39.806901,
longitude: 116.397972,
}}
/>
自定義圖片
可以通過 image 屬性設(shè)置標注點圖片，image 的值是圖片資源的名字绪妹，對于 android 是 drawable甥桂，對于 ios 是 Images.xcassets。
<Marker
title='自定義圖片'
image='flag'
coordinate={{
latitude: 39.806901,
longitude: 116.397972,
}}
/>
自定義 View
除了 image邮旷，還可以用 View 作為標注點黄选，更自由的控制標注點的顯示。
<Marker
active
title='自定義 View'
coordinate={{
latitude: 39.806901,
longitude: 116.397972,
}}
icon={() =>
<View style={style.marker}>
<Text style={style.markerText}>{(new Date()).toLocaleTimeString()}</Text>
</View>
}
/>
const style = StyleSheet.create({
marker: {
backgroundColor: '#009688',
alignItems: 'center',
borderRadius: 5,
padding: 5,
},
markerText: {
color: '#fff',
},
})
自定義彈出窗口
<Marker
active
coordinate={{
latitude: 39.806901,
longitude: 116.397972,
}}
>
<View style={style.infoWindow}>
<Text>自定義彈出窗口</Text>
</View>
</Marker>
const style = StyleSheet.create({
infoWindow: {
backgroundColor: '#8bc34a',
padding: 10,
borderRadius: 10,
elevation: 4,
borderWidth: 2,
borderColor: '#689F38',
},
})
繪制線段
<MapView zoomLevel={10} style={StyleSheet.absoluteFill}>
<Polyline
width={10}
color='rgba(255, 0, 0, 0.5)'
coordinates={[
{
latitude: 40.006901,
longitude: 116.097972,
},
{
latitude: 40.006901,
longitude: 116.597972,
},
{
latitude: 39.706901,
longitude: 116.597972,
},
]}
/>
</MapView>
熱力圖
import {MapView, HeatMap} from 'react-native-amap3d'
_coordinates = (new Array(200)).fill(0).map(i => ({
latitude: 39.5 + Math.random(),
longitude: 116 + Math.random(),
}))
<MapView zoomLevel={9} style={StyleSheet.absoluteFill}>
<HeatMap
opacity={0.8}
radius={20}
coordinates={this._coordinates}/>
</MapView>
海量點
批量添加的 Marker 數(shù)量過多會出現(xiàn)性能問題廊移，這時可以考慮用海量點（MultiPoint）糕簿。
import {MapView, MultiPoint} from 'react-native-amap3d'
_points = Array(1000).fill(0).map(i => ({
latitude: 39.5 + Math.random(),
longitude: 116 + Math.random(),
}))
_onItemPress = point => Alert.alert(this._points.indexOf(point).toString())
<MapView zoomLevel={10} style={StyleSheet.absoluteFill}>
<MultiPoint
image='point'
points={this._points}
onItemPress={this._onItemPress}
/>
</MapView>
更多示例
請參考 examples。
有問題歡迎在 issues 里討論狡孔，評論區(qū)不再回復(fù)懂诗。
