RN 高德地圖組件的使用（react-native-amap3d）

這篇文章主要介紹 RN 高德地圖組件 react-native-amap3d，安裝過程請參考 README。

基本使用

import {MapView} from 'react-native-amap3d' render() { return <MapView style={StyleSheet.absoluteFill}/> } 

 

 

設置地圖狀態

所謂的地圖狀態包括：中心座標（coordinate）、縮放級別（zoomLevel）、傾斜度（titl）、旋轉角度（rotation）、顯示區域（region）。

經過 coordinate、zoomLevel 設置顯示區域

<MapView
  style={StyleSheet.absoluteFill}
  coordinate={{
    latitude: 39.90980, longitude: 116.37296, }} zoomLevel={18} tilt={45} showsIndoorMap /> 

 

 

經過 region 設置顯示區域

region 由中心座標和經緯跨度組成，相對於 zoomLevel，region 能夠精確控制顯示邊界。

<MapView
  style={StyleSheet.absoluteFill}
  region={{
    latitude: 39.90980, longitude: 116.37296, latitudeDelta: 0.1, longitudeDelta: 0.1, }} /> 

 

 

動畫過渡

經過屬性控制的地圖狀態切換會顯得比較生硬，若是但願地圖狀態切換是動畫過渡的，能夠使用 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）
• 衛星（satellite）
• 導航（navigation）
• 公交（bus）
• 夜間（night）

<MapView
  style={StyleSheet.absoluteFill}
  zoomLevel={14} mapType='satellite' /> 

 

衛星地圖

 

導航地圖

 

公交地圖

 

夜間地圖

地圖事件

目前支持的地圖事件有：

• onPress 點按事件
• onLongPress 長按事件
• onLocation 定位事件
• onStatusChange 地圖狀態變化事件，變化過程會一直調用
• onStatusChangeComplete 地圖狀態變化結束事件

能夠經過 event.nativeEvent 獲取事件傳遞過來的數據

定位

經過 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 屬性設置標註點圖片，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 數量過多會出現性能問題，這時能夠考慮用海量點（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

原文連接：https://www.jianshu.com/p/fe90fc6a0308