在react原生地图的不同点上显示不同的标记

import React, { useState } from 'react';
import { Map, Marker } from 'react-native-maps';

const MapWithMarkers = () => {
  const [showMarkerA, setShowMarkerA] = useState(true);
  const [showMarkerB, setShowMarkerB] = useState(false);

  return (
    <Map>
      {showMarkerA && <Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }} />}
      {showMarkerB && <Marker coordinate={{ latitude: 37.78925, longitude: -122.4324 }} />}
    </Map>
  );
};

import React, { useEffect, useState } from 'react';
import { Map, Marker } from 'react-native-maps';
import axios from 'axios';

const MapWithMarkers = () => {
  const [markers, setMarkers] = useState([]);

  useEffect(() => {
    axios.get('https://api.example.com/markers')
      .then(response => {
        setMarkers(response.data);
      })
      .catch(error => {
        console.error('Error fetching markers:', error);
      });
  }, []);

  return (
    <Map>
      {markers.map(marker => (
        <Marker key={marker.id} coordinate={{ latitude: marker.latitude, longitude: marker.longitude }} />
      ))}
    </Map>
  );
};

import React from 'react';
import { Map } from 'react-native-maps';

const CustomMarker = ({ coordinate, type }) => {
  let markerColor;

  switch (type) {
    case 'A':
      markerColor = 'red';
      break;
    case 'B':
      markerColor = 'blue';
      break;
    default:
      markerColor = 'green';
  }

  return (
    <Map.Marker coordinate={coordinate} pinColor={markerColor} />
  );
};

const MapWithMarkers = () => {
  return (
    <Map>
      <CustomMarker coordinate={{ latitude: 37.78825, longitude: -122.4324 }} type="A" />
      <CustomMarker coordinate={{ latitude: 37.78925, longitude: -122.4324 }} type="B" />
    </Map>
  );
};