如何更改reactJSLeaflet中的按鈕位置？-有解無憂

我想在地圖上移動 BasemapGallery 傳單和 GeoSearch 傳單上的位置，但為了混淆如何在編碼中移動，這里是：

BasemapGallery 傳單想要向右移動，并且
GeoSearch 傳單想要向左移動。

示例圖片：圖片

這是我的代碼以及我需要在代碼中更改的內容：

import { React, useState, useEffect } from 'react'
import {
  LayersControl,
  MapContainer,
  TileLayer,
  Marker,
  Popup,
  useMapEvents,
} from 'react-leaflet'
import List from '../Component/List'
import L from 'leaflet'
import SearchControl from './SearchControl'

const { BaseLayer } = LayersControl

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}>
      <Popup>Location Me</Popup>
    </Marker>
  )
}

function MyLocationMe() {
  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}
        >
          <SearchControl className="MarkerIcon" />
          <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>
          <LocationMarker />
        </MapContainer>
      </div>
    </div>
  )
}
export default MyLocationMe

uj5u.com熱心網友回復：

控制元件應該有一個position屬性：

<SearchControl className="MarkerIcon" position="topright" />

和

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/448704.html

標籤：javascript 反应传单反应传单

上一篇：如何使用javascript洗掉串列元素

下一篇：如何在chart.js3折線圖中沿y軸方向移動原點，使x軸通過（0,0）以外的不同點？