Javascript 有没有办法隐藏本地地图标记？

我正在开发一个旅游应用程序，其中包含一张地图，上面有使用我的数据制作的标记。 我想添加“过滤”其标记的选项。 用户可以按“餐厅”、“酒店”、“商业”按钮，仅显示选定的标记

（用户按“餐厅”->仅显示餐厅标记，下面是想法的图片：

这是我的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
 {...}

import React，{useffect}来自“React”；
从“react native”导入{View，StyleSheet，TouchableOpacity，Text}；
从“反应本机手势处理程序”导入{ScrollView，TextInput}；
从“react native maps”导入MapView，{Marker}；
从“反应本机向量图标/离子图标”导入离子图标；
//酒杯
从“../service/empositions”导入{getAllRestaurant、getAllHotel、getAllCommerce}
导出默认功能AccueilScreen（）{
//休养餐厅
const[restaurants，setRestaurants]=React.useState（[]）
康斯特餐厅=（）=>[
getAllRestaurant（）。然后（响应=>{
（答复.数据）；
}).catch（err=>console.log（err））
]
//疗养院
const[hotels，setHotels]=React.useState（[]）
康斯特莱斯特酒店=（）=>[
getAllHotel（）。然后（响应=>{
setHotels（response.data）；
}).catch（err=>console.log（err））
]
//商业疗养院
const[commerces，setCommerces]=React.useState（[]）
const lesCommerces=（）=>[
getAllCommerce（）。然后（响应=>{
setCommerces（响应数据）；
}).catch（err=>console.log（err））
]
//马克餐厅酒店
const afficheRestaurant=餐厅。地图（（餐厅）=>(
)) 
//标记的附加标记HÔTELS
const afficheHotel=hotels.map（（hotel）=>(
))
//商业标记附加
const afficheCommerce=commerces.map（（commerce）=>(
))
//菲尔特餐厅
仅常量Restaurant=（）=>{
afficheCommerce=commerces.map（（空））
afficheHotel=hotels.map（（空））
}
//炮位费用
useffect（（）=>{
乐斯餐厅（）
乐斯酒店（）
lesCommerces（）
},[])
返回(
{/*--映射ET标记--*/}
{afficheRestaurant}
{afficheHotel}
{afficheCommerce}
{/*--BARRE RECHERCHE--*/}
{/*--过滤器--*/}
吹牛
餐厅
霍特尔
商业
);
}
//佩奇风格
{...}
//点菜式
{...}

我做了一些测试（constonylrestaurant），但没有什么好结果（.map可以为null，也可以是只读错误）

我想知道你有什么想法我可以用

谢谢你的帮助

---

请不要犹豫，向我询问更多信息，我对react native还不熟悉，但我会尽我所能回答您的问题，您走的是正确的道路

在组件中有另一个状态变量

const[currentCategory，setCurrentCategory]=React.useState（'All'）；

当用户单击任何按钮时，使用相应的类别更新此变量

然后使用这个新的状态变量来决定要显示哪些标记

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

现在编写一个函数，通过处理onClick来更新这个状态变量

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

现在在代码中使用上述函数，如下所示

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

在它的位置加上这个

{getMarkers()}

所以你的地图视图是这样的

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

{getMarkers（）}

---

这行得通吗？

您走的路是对的

在组件中有另一个状态变量

const[currentCategory，setCurrentCategory]=React.useState（'All'）；

当用户单击任何按钮时，使用相应的类别更新此变量

然后使用这个新的状态变量来决定要显示哪些标记

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

现在编写一个函数，通过处理onClick来更新这个状态变量

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

现在在代码中使用上述函数，如下所示

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

在它的位置加上这个

{getMarkers()}

所以你的地图视图是这样的

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

{getMarkers（）}

---

这行吗？

首先感谢你的回答，不幸的是，它似乎不起作用，你能对你的回答做一些澄清吗？也许是我做错了。@QuentinBlanche你可以在问题中更新你的新代码。我可以检查。是的，问题是我，我在onPress=onPress={（）=>setCurrentCategory上做的（'restaurant'），getMarkers}当然currentCategory仍然是一个“完全”的新手问题，但我如何在onPress操作中更改currentCategory的状态？这是我唯一的问题，因为如果我在默认情况下直接在组件“GetMarkers”中设置currentCategory，它就可以正常工作。@QuentinBlanche我已经更新了答案，以包含您拥有的大部分代码e要更改。请检查。首先感谢您的回答，不幸的是，它似乎不起作用，您可以对您的回答进行澄清吗？也许是我做错了。@QuentinBlanche您可以更新问题中的新代码。我可以检查。是的，问题是我，我在onPress=onPress={（）=>setCurrentCategory上做了此操作（'restaurant'），getMarkers}当然currentCategory仍然是一个“完全”的新手问题，但我如何在onPress操作中更改currentCategory的状态？这是我唯一的问题，因为如果我在默认情况下直接在组件“GetMarkers”中设置currentCategory，它就可以正常工作。@QuentinBlanche我已经更新了答案，以包含您拥有的大部分代码我要换衣服，看看。