如何解决React-Native-maps 如何在 MapView 中保持更新区域？
我实现了一个函数，当它在搜索屏幕上被找到时，将标记的编号移动到该位置。当我按下 MainScreen 上的按钮 (other resources) 时，我只想打印某些标记。
但是，当我按下按钮时，只打印某些标记，但它会移动到最后搜索的区域，而不是我正在查看的区域。
MainScreen.js
Button.showSpecificMarkerSearchScreen.js
import { StyleSheet,Image,View,Text,TouchableOpacity,Button } from 'react-native';
import { Icon } from 'native-base'; // 추가된 코드
import { withNavigation,navigation } from 'react-navigation';
import MapView,{ Marker,PROVIDER_GOOGLE,MAP_TYPES } from 'react-native-maps';
import iksonData from './ikson.json';
const styles = StyleSheet.create({
container: { flex: 1,backgroundColor: 'white' },text: {
flex: 1,alignItems: 'center',justifyContent: 'center',},iconImg: {
width: 30,height: 30,padding: 10,marginLeft: 5,}
});
function MapScreen(props) {
const [region,setRegion] = useState({
latitude: 35.962691,longitude: 126.97894,latitudeDelta: 0.0322,longitudeDelta: 0.0321,});
const [findRegion,setFindRegion] = useState({
latitude: null,longitude: null,latitudeDelta: null,longitudeDelta: null,});
const [showVehicleReader,setShowVehicleReader] = useState(-1);
const [btnTitle,setBtnTitle] = useState('차량용 판독기만 보기');
const new_region = props.navigation.getParam('region');
let markers;
const handleBtnPress = () => {
setShowVehicleReader((showVehicleReader === -1) ? 0 : -1);
setBtnTitle((btnTitle === '차량용 판독기만 보기') ? '전체 보기' : '차량용 판독기만 보기');
}
// -1은 전체 0은 차량용 판독기만,1은 차량용 판독기 제외
if (showVehicleReader === 1) {
markers = <View>
{iksonData.map((item) =>
(item.purpose !== '차량번호판독용') ?
<Marker
key={item.id}
title={item.id + "번 CCTV"}
description={item.lotAddress}
coordinate={{
latitude: parseFloat(item.latitude),longitude: parseFloat(item.longitude),}}
/>
:
null
)}
</View>
} else if (showVehicleReader === 0) {
markers = <View>
{iksonData.map((item) =>
(item.purpose === '차량번호판독용') ?
<Marker
key={item.id}
title={item.id + "번 CCTV"}
description={item.lotAddress}
coordinate={{
latitude: parseFloat(item.latitude),}}
pinColor={'blue'}
/>
:
null
)}
</View>
} else {
markers = <View>
{iksonData.map((item) =>
(item.purpose === '차량번호판독용') ?
<Marker
key={item.id}
title={item.id + "번 CCTV"}
description={item.lotAddress}
coordinate={{
latitude: parseFloat(item.latitude),}}
pinColor={'blue'}
/>
:
<Marker
key={item.id}
title={item.id + "번 CCTV"}
description={item.lotAddress}
coordinate={{
latitude: parseFloat(item.latitude),}}
/>
)}
</View>
}
//rendering!!!
return (
<View style={styles.container}>
<MapView
style={{ flex: 1 }}
zoomEnabled={true}
provider={PROVIDER_GOOGLE}
mapType="hybrid"
minZoomLevel={13}
maxZoomLevel={19}
initialRegion={
{
latitude: 35.962691,}
}
region={new_region || region}
>
{markers}
</MapView>
<View>
<Button
class='showSpecificMarker'
title={btnTitle}
color="#f194ff"
onPress={handleBtnPress}
/>
</View>
</View>
);
}
// navigationOptions 코드 추가
MapScreen.navigationOptions = ({ navigation }) => {
return {
headerLeft: () => <Image source={require('./assets/logo.jpg')} style={styles.iconImg} />,title: <Text style={styles.text}>9585부대 CSMap</Text>,headerRight: () =>
(
<TouchableOpacity onPress={() => navigation.navigate('Search')}>
<Icon name='ios-search' style={{ paddingRight: 10 }} />
</TouchableOpacity>
),headerTitleAlign: 'center',}
}
export default withNavigation(MapScreen);
我认为它会移动到 MainScreen MapView 中 // https://aboutreact.com/react-native-search-bar-filter-on-listview/
// import React in our code
import React,{ useState,useEffect } from 'react';
// import all the components we are going to use
import { SafeAreaView,StyleSheet,FlatList,TouchableOpacity } from 'react-native';
import { SearchBar } from 'react-native-elements';
// 익산 데이터
import iksonData from './ikson.json';
const SearchScreen = (props) => {
const { navigation,route } = props;
const [search,setSearch] = useState('');
//filter했을 때 나오는 리스트
const [filteredDataSource,setFilteredDataSource] = useState([]);
// 아무것도 검색안할 때 나와야되는 전체 리스트
const [masterDataSource,setMasterDataSource] = useState([]);
useEffect(() => {
setFilteredDataSource(iksonData);
setMasterDataSource(iksonData);
},[]);
const searchFilterFunction = (text) => {
// Check if searched text is not blank
if (text) {
// Inserted text is not blank
// Filter the masterDataSource
// Update FilteredDataSource
const newData = masterDataSource.filter(function (item) { //CCTV 카메라 넘버로 검색
const itemData = String(item.id);
const textData = text;
return itemData.indexOf(textData) > -1;
});
setFilteredDataSource(newData);
setSearch(text);
} else {
// Inserted text is blank
// Update FilteredDataSource with masterDataSource
setFilteredDataSource(masterDataSource);
setSearch(text);
}
};
// flatlist item 부분
const ItemView = ({ item }) => {
return (
// Flat List Item
<Text style={styles.itemStyle} onPress={() => getItem(item)}>
<View style={{ flex: 1}}>
<Text style={{ fontWeight: "bold",paddingTop: 25}}>{item.id + "번 CCTV"}</Text>
<Text style={{ paddingTop: 5}}>{'주소: ' + item.lotAddress}</Text>
<Text style={{ paddingTop: 5}}>{'목적: ' + item.purpose}</Text>
</View>
</Text>
);
};
const ItemSeparatorView = () => {
return (
// Flat List Item Separator
<View
style={{
height: 0.5,width: '100%',backgroundColor: '#C8C8C8',}}
/>
);
};
const getItem = (item) => {
navigation.navigate('Main',{
region:{
latitude:item.latitude,longitude:item.longitude,latitudeDelta: 0.0022,longitudeDelta: 0.0021,}
})
};
// flatlist의 data는 객체배열
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
<SearchBar
round
searchIcon={{ size: 24 }}
onChangeText={(text) => searchFilterFunction(text)}
onClear={(text) => searchFilterFunction('')}
placeholder="보고싶은 CCTV 번호를 입력해주세요."
value={search}
/>
<FlatList
data={filteredDataSource}
keyExtractor={(item,index) => index.toString()}
ItemSeparatorComponent={ItemSeparatorView}
renderItem={ItemView}
/>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',itemStyle: {
padding: 10,});
export default SearchScreen;
搜索到的最后一个位置。那我怎样才能按按钮获取我现在正在观看的区域？
========
解决方法
希望你一切顺利。
这是您可以尝试的更新代码
componentDidMount() {
this._getLocationAsync();
}
_getLocationAsync = async () => {
let { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status !== 'granted') {
this.setState({
errorMessage: 'Permission to access location was denied',});
}
let location = await Location.getCurrentPositionAsync({});
this.setState({ location });
this.setState({
region: {
latitude: location.coords.latitude,longitude: location.coords.longitude,latitudeDelta: 0.003,longitudeDelta: 0.003,},});
}
state = {
location: null,region:null,errorMessage: null,marker: {latitude: 0,longitude: 0},};
<MapView style={styles.map}
showsUserLocation = {true}
onRegionChange={this.onRegionChange.bind(this)}
region={this.state.region} >
<MapView.Marker
coordinate={this.state.marker}
title={"title"}
description={"description"}/>
</MapView>
希望对您有所帮助，如有任何疑问，请随时提问。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。