醉临武-临武县第一中学官网

React Native 高德地图组件的使用(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 控制是否启用定位,通过 locationIntervaldistanceFilter 可以控制定位频次。

<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