React Native 高德地图组件的使用(react-native-amap3d)
2017-10-10 13:03
435 查看
这篇文章主要介绍 RN 高德地图组件 react-native-amap3d,安装过程请参考 README。
标准(standard)
卫星(satellite)
导航(navigation)
公交(bus)
夜间(night)
卫星地图
导航地图
公交地图
夜间地图
可以通过
作者:7c00
链接:http://www.jianshu.com/p/fe90fc6a0308
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
基本使用
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作者:7c00
链接:http://www.jianshu.com/p/fe90fc6a0308
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关文章推荐
- React Native 高德地图组件的使用(react-native-amap3d)
- 在React Native中使用 高德地图组件react-native-amap3d
- (二)React Native中View和Text组件的使用
- 【React Native开发】 - WebView组件的使用
- (Android)react-native-wechat组件的使用总结(重点微信支付)
- 可能是最in的React Native使用原生自定义下拉刷新组件
- ReactNative的Navigator组件使用方式
- react-native-swipe-list-view侧滑删除组件使用
- 《React-Native系列》37、 ReactNative百度地图开源组件使用
- React-Native视频组件react-native-video使用(安卓版)
- React-Native之轮播组件looped-carousel的介绍与使用
- React Native 的图片点击放大效果的组件使用 react-native-zoom-image
- 【React Native开发】React Native控件之WebView组件详解以及实例使用(22)
- React native 的轮播图组件react-native-image-carousel的使用
- react-native图片组件的使用
- React Native常用组件Image使用
- 【React Native开发】 - Touchable类组件的使用
- React Native 的图片点击放大效果的组件使用 react-native-zoom-image
- React-Native开发:react-native-image-crop-picker图片上传组件的使用(安卓)
- React-Native 之 常用组件Image使用