如何在react-leaflet React JS中的地理搜索左侧添加一个按钮？

Question

我想问如何在GeoSearch的左侧制作UI按钮，您在ReactJ中使用了什么？我使用reactjs映射传单，以后在按钮上您可以在菜单按钮上选择全部，菜单1或菜单2。我将附上一个UI和我一直在进行的编码的示例，需要添加吗？

示例：

附件是我一直在研究的代码， search.js

import { useEffect, React } from 'react'
import { useMap } from 'react-leaflet'

import 'leaflet-easybutton/src/easy-button'
import 'leaflet-easybutton/src/easy-button.css'
import 'font-awesome/css/font-awesome.min.css'

import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch'

const Search = (props) => {
  const map = useMap()
  const provider = new OpenStreetMapProvider({
    params: {
      countrycodes: 'ID',
      addressdetails: 1,
      showMarker: true,
    },
  })

  useEffect(() => {
    const searchControl = new GeoSearchControl({
      position: 'topright',
      style: 'bar',
      svgHeight: 30,
      svgWidth: 30,
      shape: { r: '15', cx: '15', cy: '15' },
      style: {
        fill: '#73B0E1',
      },
      autoComplete: true,
      autoCompleteDelay: 250,
      maxMarkers: 0,
      animateZoom: false,
      autoClose: false,
    })

    map.addControl(searchControl)

    return () => map.removeControl(searchControl)
  }, [props])

  return null
}

export default Search

和， index.js

import { useState, useEffect } from 'react'
import * as React from 'react'
import {
  LayersControl,
  MapContainer,
  TileLayer,
  Marker,
  Popup,
  useMapEvents,
  ZoomControl,
} from 'react-leaflet'
import ListAccord from '../Component/ListAccord'
import L from 'leaflet'
import SearchControl from './SearchControl'
import './css/Map.css'
import 'leaflet-easybutton/src/easy-button.css'
import { OpenStreetMapProvider } from 'leaflet-geosearch'
import 'leaflet/dist/leaflet.css'

const prov = new OpenStreetMapProvider()
const { BaseLayer } = LayersControl

const icon = L.icon({
  iconSize: [25, 41],
  iconAnchor: [10, 41],
  popupAnchor: [2, -40],
  iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon.png',
  shadowUrl: 'https://unpkg.com/[email protected]/dist/images/marker-shadow.png',
})

function LocationMarker() {
  const [position, setPosition] = useState(null)
  const map = useMapEvents({
    locationfound(e) {
      setPosition(e.latlng)
      map.flyTo(e.latlng, map.getZoom())
    },
  })

  return position === null ? null : (
    <Marker position={position} icon={icon}>
      <Popup>You are here</Popup>
    </Marker>
  )
}

export default function MyMap() {
  const [map, setMap] = useState(null)
  const [position, setPosition] = useState(null)

  const [isOpen, setIsOpen] = useState(false)

  useEffect(() => {
    if (!map) return

    L.easyButton('fa-map-marker', () => {
      map.locate().on('locationfound', function (e) {
        setPosition(e.latlng)
        map.flyTo(e.latlng, map.getZoom())
      })
    }).addTo(map)
  }, [map])

  return (
    <div className="flex ml-auto">
      <ListAccord />
      <div className="w-4/5">
        <MapContainer
          center={{ lat: -6.2, lng: 106.816666 }}
          zoom={20}
          style={{ height: '100vh' }}
          whenCreated={setMap}
        >
        
          <LayersControl position="topleft">              
            <BaseLayer checked name="OpenStreetMap">
              <TileLayer
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png "
              />
            </BaseLayer>
            
          </LayersControl>
          <LocationMarker />

          <SearchControl/>
        </MapContainer>
      </div>
    </div>
  )
}