这篇文章主要介绍 RN 高德地图组件 react-native-amap3d,安装过程请参考 README。
基本使用
import {MapView} from 'react-native-amap3d'
render() {
return <MapView style={StyleSheet.absoluteFill}/>
}
![](https://i-blog.csdnimg.cn/blog_migrate/7749b9737c447b5c7cc704d411eebd69.png)
设置地图状态
所谓的地图状态包括:中心坐标(coordinate)、缩放级别(zoomLevel)、倾斜度(titl)、旋转角度(rotation)、显示区域(region)。
通过 coordinate、zoomLevel 设置显示区域
<MapView
style={StyleSheet.absoluteFill}
coordinate={{
latitude: 39.90980,
longitude: 116.37296,
}}
zoomLevel={18}
tilt={45}
showsIndoorMap
/>
![](https://i-blog.csdnimg.cn/blog_migrate/7749b9737c447b5c7cc704d411eebd69.png)
通过 region 设置显示区域
region 由中心坐标和经纬跨度组成,相对于 zoomLevel,region 可以精确控制显示边界。
<MapView
style={StyleSheet.absoluteFill}
region={{
latitude: 39.90980,
longitude: 116.37296,
latitudeDelta: 0.1,
longitudeDelta: 0.1,
}}
/>
![](https://i-blog.csdnimg.cn/blog_migrate/7749b9737c447b5c7cc704d411eebd69.png)
动画过渡
通过属性控制的地图状态切换会显得比较生硬,如果希望地图状态切换是动画过渡的,可以使用 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'
/>
![卫星地图](https://i-blog.csdnimg.cn/blog_migrate/7749b9737c447b5c7cc704d411eebd69.png)
卫星地图
![导航地图](https://i-blog.csdnimg.cn/blog_migrate/7749b9737c447b5c7cc704d411eebd69.png)
导航地图
![公交地图](https://i-blog.csdnimg.cn/blog_migrate/7749b9737c447b5c7cc704d411eebd69.png)
公交地图
![夜间地图](https://i-blog.csdnimg.cn/blog_migrate/7749b9737c447b5c7cc704d411eebd69.png)
夜间地图
地图事件
目前支持的地图事件有:
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}`)}
/>
![](https://i-blog.csdnimg.cn/blog_migrate/7749b9737c447b5c7cc704d411eebd69.png)
添加标注点
默认标注点
<MapView style={StyleSheet.absoluteFill}>
<Marker
active
title='这是一个标注点'
color='red'
description='Hello world!'
coordinate={{
latitude: 39.806901,
longitude: 116.397972,
}}
/>
</MapView>
![](https://i-blog.csdnimg.cn/blog_migrate/7749b9737c447b5c7cc704d411eebd69.png)
可拖拽的标注点
<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,
}}
/>
![](https://i-blog.csdnimg.cn/blog_migrate/7749b9737c447b5c7cc704d411eebd69.png)
自定义 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',
},
})
![](https://i-blog.csdnimg.cn/blog_migrate/7749b9737c447b5c7cc704d411eebd69.png)
自定义弹出窗口
<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',
},
})
![](https://i-blog.csdnimg.cn/blog_migrate/7749b9737c447b5c7cc704d411eebd69.png)
绘制线段
<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>
![](https://i-blog.csdnimg.cn/blog_migrate/7749b9737c447b5c7cc704d411eebd69.png)
热力图
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>
![](https://i-blog.csdnimg.cn/blog_migrate/7749b9737c447b5c7cc704d411eebd69.png)
海量点
批量添加的 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>
![](https://i-blog.csdnimg.cn/blog_migrate/7749b9737c447b5c7cc704d411eebd69.png)
更多示例
请参考 examples
作者:7c00
链接:http://www.jianshu.com/p/fe90fc6a0308
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。