Props

Edit on GitHub

legalLabelInsets {頂部：數(shù)字型；左部：數(shù)字型；底部：數(shù)字型；右部：數(shù)字型}

為 map 嵌入合法的標簽，最初是在 map 的左下角。更多信息請看 EdgeInsetsPropType.js。

maxDelta 數(shù)字型

能夠顯示的區(qū)域的最大尺寸。

minDelta 數(shù)字型

能夠顯示的區(qū)域的最小尺寸。

onRegionChange 函數(shù)型

當用戶拖動 map 時，會不斷地調(diào)用回調(diào)函數(shù)。

onRegionChangeComplete 函數(shù)型

當用戶完成移動 map 時，調(diào)用一次回調(diào)函數(shù)。

pitchEnabled 布爾型

當這個屬性設置為 true，且有效的相機與 map 相關聯(lián)，那么相機的螺旋角用于傾斜 map 的平面。當這個屬性設置為false 時，相機的螺旋角被忽略，并且 map 上總是顯示為好像用戶直接向下看。

region {緯度：數(shù)字型，經(jīng)度：數(shù)字型，latitudeDelta：數(shù)字型，longitudeDelta：數(shù)字型}

該地區(qū)會被 map 顯示出來。

由中心坐標和坐標跨度定義的區(qū)域顯示出來。

rotateEnabled 布爾型

當這個屬性設置為 true，且有效的相機與 map 相關聯(lián)，那么相機的航向角用于圍繞 map 中心點旋轉(zhuǎn) map 平面。當該屬性設置為 false 時，相機的航向角被忽略，map 總是定向的，這樣真正的北方就會位于 map 視圖的頂部。

scrollEnabled 布爾型

如果是 false，用戶無法更改 map 顯示的區(qū)域。默認值是 true。

showsUserLocation 布爾型

如果是 true，應用程序會請求用戶的位置并關注它。默認值是 false。

注意：為了獲取地理位置，你需要添加把 NSLocationWhenInUseUsageDescription 鍵添加到 info.plist，否則就會失敗!

style View#style

用于 MapView 的樣式設置和布局。更多信息請看 StyleSheet.js 和 ViewStylePropTypes.js。

zoomEnabled 布爾型

如果是 false，用戶無法縮小/放大 map。默認值是 true。

例子

Edit on GitHub

'use strict';var React = require('react-native');var StyleSheet = require('StyleSheet');var {
  MapView,
  Text,
  TextInput,
  View,
} = React;var MapRegionInput = React.createClass({
  propTypes: {
    region: React.PropTypes.shape({
      latitude: React.PropTypes.number,
      longitude: React.PropTypes.number,
      latitudeDelta: React.PropTypes.number,
      longitudeDelta: React.PropTypes.number,
    }),
    onChange: React.PropTypes.func.isRequired,
  },
  getInitialState: function() {    return {
      latitude: 0,
      longitude: 0,
      latitudeDelta: 0,
      longitudeDelta: 0,
    };
  },
  componentWillReceiveProps: function(nextProps) {    this.setState(nextProps.region);
  },
  render: function() {    var region = this.state;    return (      <View>
        <View style={styles.row}>
          <Text>
            {'Latitude'}          </Text>
          <TextInput
            value={'' + region.latitude}            style={styles.textInput}
            onChange={this._onChangeLatitude}
          />
        </View>
        <View style={styles.row}>
          <Text>
            {'Longitude'}          </Text>
          <TextInput
            value={'' + region.longitude}            style={styles.textInput}
            onChange={this._onChangeLongitude}
          />
        </View>
        <View style={styles.row}>
          <Text>
            {'Latitude delta'}          </Text>
          <TextInput
            value={'' + region.latitudeDelta}            style={styles.textInput}
            onChange={this._onChangeLatitudeDelta}
          />
        </View>
        <View style={styles.row}>
          <Text>
            {'Longitude delta'}          </Text>
          <TextInput
            value={'' + region.longitudeDelta}            style={styles.textInput}
            onChange={this._onChangeLongitudeDelta}
          />
        </View>
        <View style={styles.changeButton}>
          <Text onPress={this._change}>
            {'Change'}          </Text>
        </View>
      </View>
    );
  },
  _onChangeLatitude: function(e) {    this.setState({latitude: parseFloat(e.nativeEvent.text)});
  },
  _onChangeLongitude: function(e) {    this.setState({longitude: parseFloat(e.nativeEvent.text)});
  },
  _onChangeLatitudeDelta: function(e) {    this.setState({latitudeDelta: parseFloat(e.nativeEvent.text)});
  },
  _onChangeLongitudeDelta: function(e) {    this.setState({longitudeDelta: parseFloat(e.nativeEvent.text)});
  },
  _change: function() {    this.props.onChange(this.state);
  },
});var MapViewExample = React.createClass({
  getInitialState() {    return {
      mapRegion: null,
      mapRegionInput: null,
    };
  },
  render() {    return (      <View>
        <MapView
          style={styles.map}
          onRegionChange={this._onRegionChanged}
          region={this.state.mapRegion}
        />
        <MapRegionInput
          onChange={this._onRegionInputChanged}
          region={this.state.mapRegionInput}
        />
      </View>
    );
  },
  _onRegionChanged(region) {    this.setState({mapRegionInput: region});
  },
  _onRegionInputChanged(region) {    this.setState({
      mapRegion: region,
      mapRegionInput: region,
    });
  },
});var styles = StyleSheet.create({
  map: {
    height: 150,
    margin: 10,
    borderWidth: 1,
    borderColor: '#000000',
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  textInput: {
    width: 150,
    height: 20,
    borderWidth: 0.5,
    borderColor: '#aaaaaa',
    fontSize: 13,
    padding: 4,
  },
  changeButton: {
    alignSelf: 'center',
    marginTop: 5,
    padding: 3,
    borderWidth: 0.5,
    borderColor: '#777777',
  },
});
exports.title = '<MapView>';
exports.description = 'Base component to display maps';
exports.examples = [
  {
    title: 'Map',
    render(): ReactElement { return <MapViewExample />; }
  },
  {
    title: 'Map shows user location',
    render() {      return  <MapView style={styles.map} showsUserLocation={true} />;
    }
  }
];