(9)-地图视图
最后更新于:2022-04-01 06:50:05
> [MapView](http://facebook.github.io/react-native/docs/mapview.html#content)
## 属性
| 名称 | 类型 | 意义 | 默认 |
| --- | --- | --- | --- |
| 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, longitude: 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);
~~~
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-07_568e13f16ad83.jpg)
默认情况下,我们需要设置MapView控件的`size`,这样才能显示出来我们控件,比如上面我设置的`{ height: 150, margin: 10, borderWidth: 1, borderColor: '#000000', }`,这个是必须的。
上面的图显示我们在美国(vpn的作用),但是这个地图还是很龊的。需要我们一步一步去修善。
## zoomEnabled
缩放,放大属性,默认是为true,所以,我们在上面的例子中,双击就能达到放大的作用。如果你将`zoomEnabled`设置为`false`,就不能缩放了。
## scrollEnabled
拖拽,默认该属性为`true`,可以拖拽地图到不同的位置。如果你不想拖拽,设置该属性为`false`。
## showsUserLocation
发送位置信息,默认该属性为`false`,如果设置为`true`,处于隐私的考虑,会弹出确认对话框:
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-07_568e13f1862e1.jpg)
## mapType
### standard
~~~
<MapView
style={{ height: 600, margin: 10, borderWidth: 1, borderColor: '#000000', }}
zoomEnabled={true}
scrollEnabled={true}
showsUserLocation={true}
mapType='standard'
/>
~~~
默认就为该属性,所以显示的效果也没啥变化:
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-07_568e13f1ac5b3.jpg)
### satellite
~~~
<MapView
style={{ height: 600, margin: 10, borderWidth: 1, borderColor: '#000000', }}
zoomEnabled={true}
scrollEnabled={true}
showsUserLocation={true}
mapType='satellite'
/>
~~~
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-07_568e13f1cf4b6.jpg)
### hybrid
~~~
<MapView
style={{ height: 600, margin: 10, borderWidth: 1, borderColor: '#000000', }}
zoomEnabled={true}
scrollEnabled={true}
showsUserLocation={true}
mapType='hybrid'
/>
~~~
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-07_568e13f202991.jpg)
就比`satellite`效果了一些标签。
## legalLabelInsets
设置Legal标签的位置,默认在是左下角,我们可以将其移到左上角:
~~~
<MapView
style={{ height: 600, margin: 10, borderWidth: 1, borderColor: '#000000', }}
zoomEnabled={true}
scrollEnabled={true}
showsUserLocation={true}
mapType='hybrid'
pitchEnabled={true}
rotateEnabled={true}
legalLabelInsets={{top:20,left:20}}
/>
~~~
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-01-07_568e13f225ef3.jpg)