MapView 不会在 React Native 中更改坐标时滚动
MapView is not scrolling on changing coordinates in React Native
我想通过单击“定位我”按钮更改我的地图位置,“定位我”获取我当前的坐标并设置为反应状态。但问题是,通过点击“定位我”按钮,我的地图位置没有改变,而我的标记位置已经改变
点击“找到我”按钮前的图片
点击“定位我”按钮后的图像,这里我的制造商移动到当前坐标但地图仍在相同位置(即旧坐标)
// Location Component
import React, { Component, Fragment } from 'react';
import { View, Text, StyleSheet, TextInput, KeyboardAvoidingView, Modal, Image, TouchableOpacity, ScrollView, Dimensions } from 'react-native';
import { Icon, Button } from 'react-native-elements';
import * as Permissions from 'expo-permissions';
import MapView from 'react-native-maps';
import LocationIQ from 'react-native-locationiq';
import { Ionicons } from '@expo/vector-icons';
const { width, height } = Dimensions.get('window');
class LocationComponent extends Component {
constructor(props) {
super(props);
this.state = {
region: {
latitude: 23.0759837,
longitude: 72.8776559,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}
}
this.onRegionChange = this.onRegionChange.bind(this);
this.currentLocation = this.currentLocation.bind(this);
}
currentLocation = async () => {
let { status } = await Permissions.askAsync(Permissions.LOCATION);
var finalStatus = status;
while (finalStatus !== 'granted') {
let { stat } = await Permissions.askAsync(Permissions.LOCATION);
finalStatus = stat
}
if (finalStatus == 'granted') {
let lat;
let long;
navigator.geolocation.getCurrentPosition((position) => {
lat = position.coords.latitude;
long = position.coords.longitude;
if (lat && long) {
const region = {
latitude: lat,
longitude: long,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}
this.setState({ region: region });
}
}, (error) => {
console.error("Error Code = " + error.code + " - " + error.message);
});
}
}
onRegionChange(region) {
this.setState({ region });
}
render() {
return (
<KeyboardAvoidingView>
<ScrollView style={{ flexDirection: 'column' }}>
<View style={{ height: 680, paddingTop: 30 }}>
<MapView
style={{
flex: 1
}}
initialRegion={this.state.region}
zoomEnabled={true}
scrollEnabled={true}
showsScale={true}
showsUserLocation={true}
showsMyLocationButton={true}
showsScale={true}
showsCompass={true}
loadingIndicatorColor="blue"
onRegionChange={() => this.onRegionChange()}
onMapReady={this.onMapReady}
onRegionChangeComplete={this.onRegionChange}
>
<MapView.Marker
coordinate={{
latitude: this.state.region.latitude,
longitude: this.state.region.longitude,
}}
title={"Location"}
draggable />
</MapView>
<TouchableOpacity activeOpacity={0.5} onPress={this.currentLocation} style={styles.TouchableOpacityStyle} >
<Ionicons name="md-locate" size={24} color="red" />
</TouchableOpacity>
</View>
</ScrollView>
</KeyboardAvoidingView>
)
}
}
const styles = StyleSheet.create({
TouchableOpacityStyle: {
position: 'absolute',
width: 50,
height: 50,
alignItems: 'center',
justifyContent: 'center',
right: 20,
bottom: 20,
backgroundColor: 'white',
borderRadius: 25
},
FloatingButtonStyle: {
width: 50,
height: 50,
},
});
export default LocationComponent;
当您更改标记的位置时,您需要使用 react-native-maps 提供的 API 来 animate 您的地图。
我想通过单击“定位我”按钮更改我的地图位置,“定位我”获取我当前的坐标并设置为反应状态。但问题是,通过点击“定位我”按钮,我的地图位置没有改变,而我的标记位置已经改变
点击“找到我”按钮前的图片
点击“定位我”按钮后的图像,这里我的制造商移动到当前坐标但地图仍在相同位置(即旧坐标)
// Location Component
import React, { Component, Fragment } from 'react';
import { View, Text, StyleSheet, TextInput, KeyboardAvoidingView, Modal, Image, TouchableOpacity, ScrollView, Dimensions } from 'react-native';
import { Icon, Button } from 'react-native-elements';
import * as Permissions from 'expo-permissions';
import MapView from 'react-native-maps';
import LocationIQ from 'react-native-locationiq';
import { Ionicons } from '@expo/vector-icons';
const { width, height } = Dimensions.get('window');
class LocationComponent extends Component {
constructor(props) {
super(props);
this.state = {
region: {
latitude: 23.0759837,
longitude: 72.8776559,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}
}
this.onRegionChange = this.onRegionChange.bind(this);
this.currentLocation = this.currentLocation.bind(this);
}
currentLocation = async () => {
let { status } = await Permissions.askAsync(Permissions.LOCATION);
var finalStatus = status;
while (finalStatus !== 'granted') {
let { stat } = await Permissions.askAsync(Permissions.LOCATION);
finalStatus = stat
}
if (finalStatus == 'granted') {
let lat;
let long;
navigator.geolocation.getCurrentPosition((position) => {
lat = position.coords.latitude;
long = position.coords.longitude;
if (lat && long) {
const region = {
latitude: lat,
longitude: long,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}
this.setState({ region: region });
}
}, (error) => {
console.error("Error Code = " + error.code + " - " + error.message);
});
}
}
onRegionChange(region) {
this.setState({ region });
}
render() {
return (
<KeyboardAvoidingView>
<ScrollView style={{ flexDirection: 'column' }}>
<View style={{ height: 680, paddingTop: 30 }}>
<MapView
style={{
flex: 1
}}
initialRegion={this.state.region}
zoomEnabled={true}
scrollEnabled={true}
showsScale={true}
showsUserLocation={true}
showsMyLocationButton={true}
showsScale={true}
showsCompass={true}
loadingIndicatorColor="blue"
onRegionChange={() => this.onRegionChange()}
onMapReady={this.onMapReady}
onRegionChangeComplete={this.onRegionChange}
>
<MapView.Marker
coordinate={{
latitude: this.state.region.latitude,
longitude: this.state.region.longitude,
}}
title={"Location"}
draggable />
</MapView>
<TouchableOpacity activeOpacity={0.5} onPress={this.currentLocation} style={styles.TouchableOpacityStyle} >
<Ionicons name="md-locate" size={24} color="red" />
</TouchableOpacity>
</View>
</ScrollView>
</KeyboardAvoidingView>
)
}
}
const styles = StyleSheet.create({
TouchableOpacityStyle: {
position: 'absolute',
width: 50,
height: 50,
alignItems: 'center',
justifyContent: 'center',
right: 20,
bottom: 20,
backgroundColor: 'white',
borderRadius: 25
},
FloatingButtonStyle: {
width: 50,
height: 50,
},
});
export default LocationComponent;
当您更改标记的位置时,您需要使用 react-native-maps 提供的 API 来 animate 您的地图。