Saya sedang mengerjakan aplikasi pariwisata, berisi peta dengan penanda yang dibuat menggunakan data saya. Saya ingin menambahkan opsi untuk "memfilter" penandanya. Pengguna dapat menekan tombol "Restoran", "Hotel," Niaga" untuk hanya menampilkan penanda yang dipilih.

(Pengguna menekan "Restoran" -> Hanya tampilkan penanda restoran, berikut adalah gambar idenya:

Map and markers

Ini kode permintaan Axios saya, tidak ada yang besar:

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
});

Dan kode halaman saya, saya memastikan untuk memisahkan kategori yang berbeda dengan harapan akan lebih mudah:

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
 {...}

Saya melakukan beberapa pengujian (const onylRestaurant) tetapi tidak ada yang bagus (.map dapat berupa null, atau kesalahan hanya-baca).

Saya ingin tahu apakah Anda punya ide yang bisa saya gunakan

Terima kasih atas bantuannya!

Jangan ragu untuk menanyakan informasi tambahan kepada saya, saya masih baru dalam bereaksi-asli tetapi saya akan melakukan yang terbaik untuk menjawab Anda

0
Quentin Blanche 12 Mei 2021, 11:56

1 menjawab

Jawaban Terbaik

Anda berada di jalan yang benar.

Miliki variabel status lain di Component Anda.

const [currentCategory, setCurrentCategory] = React.useState('All');

Saat pengguna mengklik tombol apa saja, perbarui variabel ini dengan kategori yang sesuai.

Kemudian gunakan variabel status baru ini untuk memutuskan penanda mana yang ingin Anda tampilkan. Sesuatu seperti ini.

const getMarkers = () => {
    switch (currentCategory) {
        case 'hotel': return afficheHotel;
        case 'restaurant': return afficheRestaurant;
        case 'commerce': return afficheCommerce;
        default: return [...afficheHotel, ...afficheRestaurant, ...afficheCommerce];
    }
}

Sekarang tulis fungsi untuk memperbarui variabel status ini dengan menangani onClick

const onCategoryClick = category => {
    setCurrentCategory(category);
}

Sekarang gunakan fungsi di atas dalam kode Anda seperti ini

<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>

Terakhir, Anda harus memperbarui kode Anda untuk menghapus bagian ini di dalam MapView Anda

{afficheRestaurant}

{afficheHotel}

{afficheCommerce}

Dan sebagai gantinya tambahkan ini

{getMarkers()}

Jadi Tampilan Peta Anda akan menjadi ini,

<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>

Apakah ini bekerja?

2
Nisanth Reddy 12 Mei 2021, 09:54