[英]Is there a way to hide react-native-maps markers?
我正在開發一個旅游應用程序,其中包含一個 map 和使用我的數據制作的標記。 我想添加“過濾”其標記的選項。 用戶可以按下按鈕“餐廳”、“酒店”、“商務”以僅顯示選定的標記。
(用戶按下“餐廳”-> 僅顯示餐廳標記,這是該想法的圖片:
這是我的 Axios 請求的代碼,沒什么大不了的:
import axios from 'axios';
// URL API BASE
const APIURL = 'http://10.22.101.55:5000/api';
// RECUPERATION DES RESTAURANTS
export const getAllRestaurant = (nom, adresse, ville, cp, telephone, email, latitude, longitude ) => axios.get(`${APIURL}/restaurant`, {
nom: nom,
adresse: adresse,
ville: ville,
cp: cp,
telephone: telephone,
email: email,
latitude: latitude,
longitude: longitude
});
// RECUPERATION DES HôTELS
export const getAllHotel = (nom, adresse, ville, cp, telephone, email, latitude, longitude ) => axios.get(`${APIURL}/hotel`, {
nom: nom,
adresse: adresse,
ville: ville,
cp: cp,
telephone: telephone,
email: email,
latitude: latitude,
longitude: longitude
});
// RECUPERATION DES COMMERCES
export const getAllCommerce = (nom, adresse, ville, cp, telephone, email, latitude, longitude ) => axios.get(`${APIURL}/commerce`, {
nom: nom,
adresse: adresse,
ville: ville,
cp: cp,
telephone: telephone,
email: email,
latitude: latitude,
longitude: longitude
});
而我頁面的代碼,我確保將不同的類別分開,希望它會更容易:
import React, { useEffect } from 'react';
import { View, StyleSheet, TouchableOpacity, Text} from 'react-native';
import { ScrollView, TextInput } from 'react-native-gesture-handler';
import MapView, { Marker } from 'react-native-maps';
import Ionicons from 'react-native-vector-icons/Ionicons';
// Récupération des données
import {getAllRestaurant, getAllHotel, getAllCommerce} from '../service/Emplacements'
export default function AccueilScreen() {
// RECUPERATION DES RESTAURANTS
const [restaurants, setRestaurants] = React.useState([])
const LesRestaurants = () => [
getAllRestaurant().then(response => {
setRestaurants(response.data);
}).catch(err => console.log(err))
]
// RECUPERATION DES HÔTELS
const [hotels, setHotels] = React.useState([])
const LesHotels = () => [
getAllHotel().then(response => {
setHotels(response.data);
}).catch(err => console.log(err))
]
// RECUPERATION DES COMMERCES
const [commerces, setCommerces] = React.useState([])
const lesCommerces = () => [
getAllCommerce().then(response => {
setCommerces(response.data);
}).catch(err => console.log(err))
]
// AFFICHAGE DES MARKERS RESTAURANTS
const afficheRestaurant = restaurants.map((restaurant) => (
<Marker
pinColor='#fdca40'
key={restaurant.id}
coordinate={{latitude: restaurant.latitude, longitude: restaurant.longitude}}
title={restaurant.nom}
/>
))
// AFFICHAGE DES MARKERS HÔTELS
const afficheHotel = hotels.map((hotel) => (
<Marker
pinColor='#2978b5'
key={hotel.id}
coordinate={{latitude: hotel.latitude, longitude: hotel.longitude}}
title={hotel.nom}
/>
))
// AFFICHAGE DES MARKERS COMMERCES
const afficheCommerce = commerces.map((commerce) => (
<Marker
pinColor='#8fd9a8'
key={commerce.id}
coordinate={{latitude: commerce.latitude, longitude: commerce.longitude}}
title={commerce.nom}
/>
))
// FILTRE RESTAURANT
const onlyRestaurant = () => {
afficheCommerce = commerces.map((null))
afficheHotel = hotels.map((null))
}
// CHARGEMENT DES EMPLACEMENTS
useEffect(() => {
LesRestaurants()
LesHotels()
lesCommerces()
},[])
return (
<View style={styles.container}>
{/* -- MAP ET MARKERS -- */}
<MapView
customMapStyle={MapStyle}
scrollEnabled={false}
rotateEnabled={false}
zoomEnabled={false}
minZoomLevel={0}
maxZoomLevel={13}
style={styles.container}
region={{
latitude: 49.4826616,
longitude: 1.7245633,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}
>
{afficheRestaurant}
{afficheHotel}
{afficheCommerce}
</MapView>
{/* -- BARRE RECHERCHE -- */}
<View style={styles.searchBox}>
<TextInput
placeholder='Rechercher un lieu ...'
placeholderTextColor='#fb3640'
style={{flex: 1, padding: 0}}
/>
<Ionicons name='search-outline' size={20}/>
</View>
{/* -- FILTRE -- */}
<ScrollView
horizontal
scrollEventThrottle={1}
showsHorizontalScrollIndicator={false}
height={50}
style={styles.scroll}
contentContainerStyle={{paddingRight: 20}}
>
<TouchableOpacity style={styles.itemAll}>
<Ionicons size={15} name='options-outline'> Tout</Ionicons>
</TouchableOpacity>
<TouchableOpacity style={styles.itemRestaurant} onPress={onlyRestaurant}>
<Ionicons size={15} name='restaurant-outline'> Restaurant</Ionicons>
</TouchableOpacity>
<TouchableOpacity style={styles.itemHotel}>
<Ionicons size={15} name='bed-outline'> Hôtel</Ionicons>
</TouchableOpacity>
<TouchableOpacity style={styles.itemCommerce}>
<Ionicons size={15} name='cart-outline'> Commerce</Ionicons>
</TouchableOpacity>
</ScrollView>
</View>
);
}
// STYLE DE LA PAGE
{...}
// STYLE DE LA CARTE
{...}
我做了一些測試(const onylRestaurant),但沒有什么好處(.map 可以是 null,或只讀錯誤)。
我想知道你是否有任何我可以使用的想法
謝謝你的幫助!
不要猶豫,向我詢問更多信息,我還是 react-native 的新手,但我會盡力回答你
你走在正確的道路上。
在您的組件中有另一個 state 變量。
const [currentCategory, setCurrentCategory] = React.useState('All');
當用戶點擊任何按鈕時,用相應的類別更新這個變量。
然后使用這個新的 state 變量來決定要顯示哪些標記。 像這樣的東西。
const getMarkers = () => {
switch (currentCategory) {
case 'hotel': return afficheHotel;
case 'restaurant': return afficheRestaurant;
case 'commerce': return afficheCommerce;
default: return [...afficheHotel, ...afficheRestaurant, ...afficheCommerce];
}
}
現在編寫一個 function 通過處理 onClick 來更新這個 state 變量
const onCategoryClick = category => {
setCurrentCategory(category);
}
現在像這樣在你的代碼中使用上面的 function
<TouchableOpacity style={styles.itemAll} onPress={() => onCategoryClick('All')}>
<Ionicons size={15} name='options-outline'> Tout</Ionicons>
</TouchableOpacity>
<TouchableOpacity style={styles.itemRestaurant} onPress={() => onCategoryClick('restaurant')}>
<Ionicons size={15} name='restaurant-outline'> Restaurant</Ionicons>
</TouchableOpacity>
<TouchableOpacity style={styles.itemHotel} onPress={() => onCategoryClick('hotel')}>
<Ionicons size={15} name='bed-outline'> Hôtel</Ionicons>
</TouchableOpacity>
<TouchableOpacity style={styles.itemCommerce} onPress={() => onCategoryClick('commerce')}>
<Ionicons size={15} name='cart-outline'> Commerce</Ionicons>
</TouchableOpacity>
最后,您必須更新代碼以在 MapView 中刪除此部分
{afficheRestaurant}
{afficheHotel}
{afficheCommerce}
並在其位置添加此
{getMarkers()}
所以你的 Mapview 將是這樣的,
<MapView
customMapStyle={MapStyle}
scrollEnabled={false}
rotateEnabled={false}
zoomEnabled={false}
minZoomLevel={0}
maxZoomLevel={13}
style={styles.container}
region={{
latitude: 49.4826616,
longitude: 1.7245633,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}
>
{getMarkers()}
</MapView>
這行得通嗎?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.