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

前端之家收集整理的这篇文章主要介绍了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}} />
原文链接:https://www.f2er.com/react/307774.html

猜你在找的React相关文章