使用 Places Autocomplete 的 React-Leaflet 地图重定位

Question

我的 React 应用程序有使用 React Leaflet 创建的地图：

import {MapContainer TileLayer } from "react-leaflet";
import React from "react";

export default function App() {
return (
<MapContainer
                center={[49.1951, 16.6068]}
                zoom={13}
                scrollWheelZoom={false}
            >
<TileLayer
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />

</MapContainer>

<Search/>
);}

另外，我的应用程序有使用 Places 自动完成的搜索组件，我可以从中获取新坐标，它在这里：https://github.com/AlonaVa/searchApp/blob/main/search.js

我的任务是将我的地图重新定位到从搜索组件 (latLng) 中选择的位置。谢谢你的建议。

Answer 1

在应用组件中创建地图变量和坐标变量

然后将坐标的 setter 传递给 Search comp。一旦坐标变化触发应用程序上的地图视图变化

export default function App() {
  const [map, setMap] = useState(null);
  const [coordinates, setCoordinates] = useState({ lat: "", lng: "" });

  useEffect(() => {
    if (map && coordinates.lat && coordinates.lng) map.setView(coordinates);
  }, [map, coordinates]);

  return (
    <>
      <MapContainer
        center={[49.1951, 16.6068]}
        zoom={13}
        scrollWheelZoom={false}
        style={{ height: "100vh" }}
        whenCreated={setMap}
      >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
        />
      </MapContainer>
      <Search setCoordinates={setCoordinates} />
    </>
  );
}

在Search comp中如果考虑到value是一个包含lat和lng的对象，内部使用坐标setter来改变坐标值：

 export default function Search({ coordinates, setCoordinates }) {
      const [address, setAddress] = useState("");
    
      const handleSelect = async (value) => {
        const results = await geocodeByAddress(value);
        latLng = await getLatLng(results[0]);
        setAddress(value);
        setCoordinates({ lat: value.lat, lng: value.lng });
      };
   ...
 }

使用 Places Autocomplete 的 React-Leaflet 地图重定位

React-Leaflet Map relocation with using Places Autocomplete

javascript

google-api

leaflet

reactjs

react-leaflet