Map 視圖

Props

Edit on GitHub

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

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

maxDelta 數(shù)字型

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

minDelta 數(shù)字型

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

onRegionChange 函數(shù)型

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

onRegionChangeComplete 函數(shù)型

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

pitchEnabled 布爾型

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

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

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

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

rotateEnabled 布爾型

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

scrollEnabled 布爾型

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

showsUserLocation 布爾型

如果是 true，應(yīng)用程序會請求用戶的位置并關(guān)注它。默認(rèn)值是 false。

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

style View#style

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

zoomEnabled 布爾型

如果是 false，用戶無法縮小/放大 map。默認(rèn)值是 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} />;
    }
  }
];