如何编辑 ReactJS 地理搜索按钮居中？

Question

我想将地图从按钮更新为搜索，但已尝试在 ReactJS 中使用 link https://smeijer.github.io/leaflet-geosearch/，但它一直失败。你如何改变它？

我想要的示例搜索图片：

Example Search on the map

Search view is mine

我的代码是什么样的，我需要更改或添加什么代码？

import { React, useState, useEffect } from 'react'
import {
  LayersControl,
  MapContainer,
  TileLayer,
  useMap,
} from 'react-leaflet'

import icon from './constants'

import List from '../Component/List'
import L from 'leaflet'
import 'leaflet-easybutton/src/easy-button'
import 'leaflet-easybutton/src/easy-button.css'

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

const { BaseLayer } = LayersControl

function LeafletgeoSearch() {
  const map = useMap()
  const provider = new OpenStreetMapProvider({
    params: {
      'accept-language': 'id',
      countrycodes: 'id',
      addressdetails: 1,
    },
  })

  useEffect(() => {
    const searchControl = new SearchControl({
      notFoundMessage: 'Sorry, that address could not be found.',
      provider,
      marker: {
        icon,
      },
    })

    map.addControl(searchControl)

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

  return null
}


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

  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">
      <List />
      <div className="w-4/5">
        <MapContainer
          center={{ lat: 51.505, lng: -0.09 }}
          zoom={20}
          style={{ height: '100vh' }}
          whenCreated={setMap}
        >
          <LeafletgeoSearch />
          <LayersControl>
            <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>
        </MapContainer>
      </div>
    </div>
  )
}

Answer 1

你很接近。您需要应用一些 css 更改。来源可以 this github issue 并进行一些额外的调整

在 styles.css 添加以下更改：

.leaflet-control-geosearch form {
  display: block;
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  margin: 0 auto;
}

.leaflet-control-geosearch form input {
  width: 100%;
}

.leaflet-control-geosearch .leaflet-bar-part {
  display: none;
}

Demo

如何编辑 ReactJS 地理搜索按钮居中？

How to edit ReactJS geosearch button to center?

javascript

leaflet

reactjs