React-Leaflet地图重新定位，使用地点自动完成

npm install react-leaflet leaflet

import React, { useState } from 'react';
import { MapContainer, TileLayer, useMap } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

function MapComponent() {
  const [position, setPosition] = useState([51.505, -0.09]); // 初始位置

  return (
    <MapContainer center={position} zoom={13} style={{ height: '400px', width: '100%' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
    </MapContainer>
  );
}

function MapComponent() {
  const [position, setPosition] = useState([51.505, -0.09]);

  function ReCenterMap() {
    const map = useMap();
    map.setView(position, 13); // 设置新的位置和缩放级别
    return null;
  }

  return (
    <MapContainer center={position} zoom={13} style={{ height: '400px', width: '100%' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <ReCenterMap /> {/* 调用重新定位地图的组件 */}
    </MapContainer>
  );
}

npm install react-places-autocomplete

import React, { useState } from 'react';
import { MapContainer, TileLayer, useMap } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import PlacesAutocomplete, { geocodeByAddress, getLatLng } from 'react-places-autocomplete';

function MapComponent() {
  const [address, setAddress] = useState('');

  function handleSelect(selectedAddress) {
    setAddress(selectedAddress);
    geocodeByAddress(selectedAddress)
      .then(results => getLatLng(results[0]))
      .then(latLng => {
        const map = useMap();
        map.setView(latLng, 13); // 设置新的位置和缩放级别
      })
      .catch(error => console.error('Error', error));
  }

  return (
    <MapContainer style={{ height: '400px', width: '100%' }}>
      <PlacesAutocomplete value={address} onChange={setAddress} onSelect={handleSelect}>
        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
          <div>
            <input {...getInputProps({ placeholder: 'Search Places...' })} />
            <div>
              {loading ? <div>Loading...</div> : null}
              {suggestions.map(suggestion => {
                const style = {
                  backgroundColor: suggestion.active ? '#41b6e6' : '#fff'
                };
                return (
                  <div {...getSuggestionItemProps(suggestion, { style })}>
                    {suggestion.description}
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </PlacesAutocomplete>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
    </MapContainer>
  );
}