> [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); ~~~  默認情況下，我們需要設置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, margin: 10, borderWidth: 1, borderColor: '#000000', }} zoomEnabled={true} scrollEnabled={true} showsUserLocation={true} mapType='satellite' /> ~~~  ### hybrid ~~~ <MapView style={{ height: 600, margin: 10, borderWidth: 1, borderColor: '#000000', }} zoomEnabled={true} scrollEnabled={true} showsUserLocation={true} mapType='hybrid' /> ~~~  就比`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}} /> ~~~