react-native试玩(9)-地图视图

MapView

属性

名称	类型	意义	默认
annotations	[{latitude: number,longitude: number,animateDrop: bool,title: string,subtitle: string,hasLeftCallout: bool,hasRightCallout: bool,onLeftCalloutPress: function,onRightCalloutPress: function,id: string}]	设置地图基本属性	无
legalLabelInsets	{top: number,left: number,bottom: number,right: number}	插入地图的合法标签	无
mapType	enum(‘standard’,‘satellite’,‘hybrid’)	地图的类型(标准版2D图，卫星图，混合版)	‘standard’
maxDelta	number	显示最大的区域值，精度	无
minDelta	number	最小精度	无
onAnnotationPress	function	点击注释调用的方法	无
onRegionChange	function	拖拽地图调用的方法	无
onRegionChangeComplete	function	地图移动结束调用的方法	无
pitchEnabled	bool	设置为true时，可以改变我们视角的角度，如果为false，那就是垂直往瞎看	无
region	{latitude: number,latitudeDelta: number,longitudeDelta: number}	定义地图中心点的经纬度	无
rotateEnabled	bool	是否可以旋转地图	无
scrollEnabled	bool	是否可以滚动地图，以改变region显示的点	true
showsUserLocation	bool	是否显示用户位置	false
style	Style	样式	无
zoomEnabled	bool	是否可以缩放地图	true

实例

默认

首先我们来显示一张默认的地图：

'use strict';

var React = require('react-native');

var {
    AppRegistry,StyleSheet,View,MapView,} = React;

var helloworld = React.createClass({


    render: function() {
    return (
        <MapView  style={{ height: 150,margin: 10,borderWidth: 1,borderColor: '#000000',}} /> ); },}); var styles = StyleSheet.create({ }); AppRegistry.registerComponent('hellowrold',() => helloworld); 

默认情况下，我们需要设置MapView控件的size，这样才能显示出来我们控件，比如上面我设置的{ height: 150,margin: 10,borderWidth: 1,borderColor: '#000000',},这个是必须的。

上面的图显示我们在美国(vpn的作用),但是这个地图还是很龊的。需要我们一步一步去修善。

zoomEnabled

缩放，放大属性，默认是为true，所以，我们在上面的例子中，双击就能达到放大的作用。如果你将zoomEnabled设置为false,就不能缩放了。

scrollEnabled

拖拽，默认该属性为true，可以拖拽地图到不同的位置。如果你不想拖拽，设置该属性为false。

showsUserLocation

发送位置信息，默认该属性为false,如果设置为true,处于隐私的考虑，会弹出确认对话框：

mapType

standard

<MapView  style={{ height: 600,margin: 10,borderWidth: 1,borderColor: '#000000',}} zoomEnabled={true} scrollEnabled={true} showsUserLocation={true} mapType='standard' />

默认就为该属性，所以显示的效果也没啥变化：

satellite

<MapView  style={{ height: 600,}} zoomEnabled={true} scrollEnabled={true} showsUserLocation={true} mapType='satellite' />

hybrid

<MapView  style={{ height: 600,}} zoomEnabled={true} scrollEnabled={true} showsUserLocation={true} mapType='hybrid' />

就比satellite效果了一些标签。

legalLabelInsets

设置Legal标签的位置，默认在是左下角，我们可以将其移到左上角：

 <MapView  style={{ height: 600,}} zoomEnabled={true} scrollEnabled={true} showsUserLocation={true} mapType='hybrid' pitchEnabled={true} rotateEnabled={true} legalLabelInsets={{top:20,left:20}} />