react-native - 使用 latitudeDelta 和 longitudeDelta 缩放 map

Question

我正在使用 react-native-maps。我正在使用折线显示从源到目的地的方向。但它没有与屏幕中心对齐。缩放也不合适。

如何正确缩放 map 以在屏幕中央正确显示方向。

这是我的代码:

const ASPECT_RATIO = width / height;
const LATITUDE = 40.7128;
const LONGITUDE = 74.0060;
const LATITUDE_DELTA = 0.0012;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

this.state = {
    region: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
    }
}

<MapView
    provider={PROVIDER_GOOGLE}
    style={StyleSheet.absoluteFillObject}
    region={this.state.region}>

    <MapView.Polyline
        coordinates={direction}
        strokeWidth={4}
        strokeColor="#000"/>
</MapView>

提前致谢

Answer 1

我能够缩放 map 以使坐标适合屏幕。

这是代码:

const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const SPACE = 0.01;

function createMarker(modifier = 1) {
    return {
        latitude: LATITUDE - (SPACE * modifier),
        longitude: LONGITUDE - (SPACE * modifier),
    };
}

const MARKERS = [
    createMarker(),
    createMarker(2),
    createMarker(3),
    createMarker(4),
];

const DEFAULT_PADDING = { top: 40, right: 40, bottom: 40, left: 40 };

class FitToCoordinates extends Component {
    fitPadding() {
        this.map.fitToCoordinates([MARKERS[2], MARKERS[3]], {
          edgePadding: { top: 100, right: 100, bottom: 100, left: 100 },
          animated: true,
        });
    }

    fitBottomTwoMarkers() {
        this.map.fitToCoordinates([MARKERS[2], MARKERS[3]], {
            edgePadding: DEFAULT_PADDING,
            animated: true,
        });
    }

    fitAllMarkers() {
        this.map.fitToCoordinates(MARKERS, {
            edgePadding: DEFAULT_PADDING,
            animated: true,
        });
    }

    render() {
    return (
        <View style={styles.container}>
            <MapView
                ref={ref => { this.map = ref; }}
                style={styles.map}
                initialRegion={{
                    latitude: LATITUDE,
                    longitude: LONGITUDE,
                     latitudeDelta: LATITUDE_DELTA,
                     longitudeDelta: LONGITUDE_DELTA,
                }}
             >
                {MARKERS.map((marker, i) => (
                    <MapView.Marker
                        key={i}
                        coordinate={marker}
                    />
                ))}
             </MapView>
             <View style={styles.buttonContainer}>
                 <TouchableOpacity
                     onPress={() => this.fitPadding()}
                     style={[styles.bubble, styles.button]}
                 >
                     <Text>Fit Bottom Two Markers with Padding</Text>
                 </TouchableOpacity>
                 <TouchableOpacity
                     onPress={() => this.fitBottomTwoMarkers()}
                     style={[styles.bubble, styles.button]}
                 >
                     <Text>Fit Bottom Two Markers</Text>
                 </TouchableOpacity>
                 <TouchableOpacity
                      onPress={() => this.fitAllMarkers()}
                      style={[styles.bubble, styles.button]}
                 >
                      <Text>Fit All Markers</Text>
                 </TouchableOpacity>
            </View>
        </View>
    );
  }
}