《React-Native系列》36、 ReactNative地图组件

写在前面的话：

明天就国庆了，祝伟大的祖国母亲节日快乐！

今天，介绍地图组件。

ReactNative官方提供了一个MapView的组件，我们先来说说它吧。

先来看下他的API吧。

iOS  annotations [{latitude: number, longitude: number, animateDrop: bool, title: string, subtitle: string, hasLeftCallout: bool, hasRightCallout: bool, onLeftCalloutPress: function, onRightCalloutPress: function, id: string}] 
地图上的标注点，可以带有标题及副标题。

ios  legalLabelInsets {top: number, left: number, bottom: number, right: number} 
地图上标签的合法范围。默认在地图底部左侧。参见EdgeInsetsPropType.js了解更多信息。

ios  mapType enum('standard', 'satellite', 'hybrid') 
要显示的地图类型。
standard: 标准道路地图（默认）。
satellite: 卫星视图。
hybrid: 卫星视图并附带道路和感兴趣的点标记。

ios  maxDelta number 
可以被显示的最大区域尺寸。

ios  minDelta number 
可以被显示的最小区域尺寸。

ios  overlays [{coordinates: [{latitude: number, longitude: number}], lineWidth: number, strokeColor: ColorPropType, fillColor: ColorPropType, id: string}] 
地图的覆盖层。

onAnnotationPress function 
当用户点击地图上的标注之后会调用此回调函数一次。

onRegionChange function 
在用户拖拽地图的时候持续调用此回调函数。

onRegionChangeComplete function 
当用户停止拖拽地图之后，调用此回调函数一次。

pitchEnabled bool 
当此属性设为true并且地图上关联了一个有效的镜头时，镜头的抬起角度会使地图平面倾斜。当此属性设为false，镜头的抬起角度会忽略，地图永远都显示为俯视角度。

region {latitude: number, longitude: number, latitudeDelta: number, longitudeDelta: number} 
地图显示的区域。区域使用中心的坐标和要显示的范围来定义。

rotateEnabled bool 
当此属性设为true并且地图上关联了一个有效的镜头时，镜头的朝向角度会用于基于中心点旋转地图平面。当此属性设置为false时，朝向角度会被忽略，并且地图永远都显示为顶部方向为正北方。

scrollEnabled bool 
如果此属性设为false，用户不能改变地图所显示的区域。默认值为true。

showsUserLocation bool 
如果此属性为true，应用会请求用户当前的位置并且聚焦到该位置。默认值是false。
注意：你需要在Info.plist中增加NSLocationWhenInUseUsageDescription字段。否则它会没有任何提示而直接失败！

zoomEnabled bool 
如果此属性为false，用户则不能旋转/缩放地图。默认值为true。

Android  active bool 


ios  showsCompass bool 
如果此属性为false，地图上不会显示指南针。默认值为true。

ios  showsPointsOfInterest bool 
如果此属性为false，感兴趣的点不会在地图上显示。默认为true。

我们看下面的一个Demo代码。

[javascript]  view plain  copy

 

1. import React, { Component } from 'react';  
2. import {  
3.   AppRegistry,  
4.   StyleSheet,  
5.   Text,  
6.   View,  
7.   MapView,  
8. } from 'react-native';  
9.   
10. class baiduMapDemo extends Component {  
11.   render() {  
12.     return (  
13.       <MapView  
14.         style={styles.map}  
15.         onRegionChangeComplete={()=>{}}  
16.         region={{  
17.           latitude: 40.027737,  
18.           longitude:116.403694,  
19.           latitudeDelta: 1,  
20.           longitudeDelta: 0.5,  
21.         }}  
22.         annotations={[{  
23.           longitude: 116.403694,  
24.           latitude: 40.027737,  
25.           title: 'I am Here!',  
26.         }]}  
27.       />  
28.     );  
29.   }  
30. }  
31. const styles = StyleSheet.create({  
32.     map: {  
33.       marginTop:64,  
34.       height: 350,  
35.       margin: 10,  
36.       borderWidth: 1,  
37.       borderColor: '#000000',  
38.     }  
39. });  
40.   
41. AppRegistry.registerComponent('baiduMapDemo', () => baiduMapDemo);  

代码显示效果如下图：

好，下面一篇文章再介绍个开源的百度地图组件吧。