react-native - react-native-maps：如何在地图边界内显示标注？

Question

我在使用以下代码时遇到的一个问题：只有部分标注可见（部分标注被屏幕标题隐藏）。有没有一种简单的方法来显示所有这些？

这是它的外观：

这是代码：

import React, { Component } from 'react';
import { StyleSheet, View, Text, Modal, TouchableOpacity } from 'react-native';
import { MapView } from 'expo';

const mapCoord = {
  latitude: 35.6,
  longitude: 139.8,
  latitudeDelta: 4,
  longitudeDelta: 4
};

const city = { latitude: 37.0, longitude: 140.5 };

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isMapReady: false,
      appModalVisible: false
    };
  }

  onMapLayout() {
    this.setState({ isMapReady: true });
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={styles.headerViewStyle}>
          <Text style={styles.headerStyle}>
            Map Title
          </Text>
        </View>
        <MapView
          style={{ flex: 1 }}
          zoomEnabled = {false}
          rotateEnabled = {false}
          scrollEnabled = {false}
          region={mapCoord}
          onLayout={this.onMapLayout.bind(this)}
          onPress={(e) => this.onMapPress(e)}
        >
        {this.state.isMapReady &&
          <View>
            <MapView.Marker
              coordinate={city}
              stopPropagation = {true}
              ref={marker => {
                this.marker1 = marker;
              }}
              onPress={() => {console.log("Marker/onPress");}}
              onCalloutPress={() => {console.log("Marker/onCalloutPress");
                this.marker1.hideCallout();}}
            >
              <MapView.Callout>
                <View style={styles.viewStyle}>
                  <Text style={styles.textStyle}>
                    info:
                  </Text>
                  <Text>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                  </Text>
                </View>
              </MapView.Callout>
            </MapView.Marker>
          </View>
        }
      </MapView>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.appModalVisible}
          onRequestClose={() => {
            this.setState({ appModalVisible: false });
          }}>
          <View style={styles.modalContainerViewStyle}>
            <View style={styles.modalViewStyle}>
              <Text style={styles.textStyle}>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
              </Text>
              <View style={{ height: 40, margin: 5 }}>
                <TouchableOpacity style={styles.buttonStyle}
                  onPress={() => { this.setState({ appModalVisible: false }); }}>
                  <Text style={{ fontSize: 20 }}>OK</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </Modal>
      </View>
    );
  }

  onMapPress(e) {
    console.log("In onMapPress. coordinate: ", e.nativeEvent.coordinate);
    this.setState({ appModalVisible: true });
  }
}

    const styles = StyleSheet.create({
      textStyle: {
        fontSize: 16,
        alignSelf: 'center',
        padding: 5
      },
      button: {
        width: 80,
        paddingHorizontal: 12,
        alignItems: 'center',
        marginHorizontal: 10
      },
      buttonContainer: {
        flexDirection: 'row',
        marginVertical: 20,
        backgroundColor: 'transparent',
        justifyContent: 'center'
      },
      viewStyle: {
        width: 200,
        height: 250,
        backgroundColor: "#fff",
        padding: 20
      },
      headerViewStyle: {
        justifyContent: "center",
        alignItems: "center",
        height: 60,
        backgroundColor: "#f5f5f5",
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.2,
        shadowRadius: 2,
        elevation: 3,
        position: 'relative'
      },
      headerStyle: {
        fontSize: 20,
        fontWeight: "bold"
      },
      modalContainerViewStyle: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#00000080'
      },
      modalViewStyle: {
        width: 300,
        height: 380,
        backgroundColor: "#fff",
        padding: 20
      }
    });

标签： react-nativeexporeact-native-maps

Answer 1

我解决了将mapPadding属性添加到 MapView 的问题。您必须添加一些顶部填充。那应该行得通。

mapPadding - 向地图的每一侧添加自定义填充。当地图元素/标记被遮挡时很有用。

文档

示例代码：

    <MapView
      style={{
        height: MAP_HEIGHT,
        width: MAP_WIDTH
      }}
      region={{
        latitude: MAP_LATITUDE,
        longitude: MAP_LONGITUDE,
        latitudeDelta: 0.0025,
        longitudeDelta: 0.0121
      }}
      mapPadding={{ top: MAP_HEIGHT / 4 }}
    >
    </MapView>