React Google Map选择新搜索地点后未刷新问题求助

你的核心问题在于地图的center属性是固定值，没有关联到选中地点的坐标，而且通过key强制重渲染的方式不仅没必要，还可能导致地图重新加载的性能问题。以下是两种更合理的解决方案：

方案一：通过状态更新地图中心（推荐） #

直接将center设为组件状态，选中地点后更新状态，地图会自动响应并移动到新坐标：

import React, { useState} from 'react';
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
import usePlacesAutocomplete, { getGeocode, getLatLng } from 'use-places-autocomplete';

const MapContainer = () => {
  const [map, setMap] = useState(null);
  const [selectedPlace, setSelectedPlace] = useState(null);
  // 将center设为状态，初始值为默认坐标
  const [center, setCenter] = useState({
    lat: 37.7749,
    lng: -122.4194,
  });
  
  const containerStyle = {
    width: '100%',
    height: '400px',
  };

  const onLoad = (map) => {
    setMap(map);
  };

  const handleSelect = async (address) => {
    try {
      const results = await getGeocode({ address });
      const { lat, lng } = await getLatLng(results[0]);
      setSelectedPlace({ address, lat, lng });
      // 更新地图中心坐标
      setCenter({ lat, lng });
    } catch (error) {
      console.error('Error:', error);
    }
  };

  const handleLoadScriptError = (error) => {
    console.error('Load Error:', error);
  };

  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY" libraries={['places']} onError={handleLoadScriptError}>
      <div style={containerStyle}>
        <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={10} onLoad={onLoad}>
          {selectedPlace && <Marker position={{ lat: selectedPlace.lat, lng: selectedPlace.lng }} />}
        </GoogleMap>
        <PlacesSearchBox onSelect={handleSelect} />
      </div>
    </LoadScript>
  );
};

const PlacesSearchBox = ({ onSelect }) => {
  const { ready, value, suggestions: { status, data }, setValue, clearSuggestions } = usePlacesAutocomplete();

  const handleInputChange = (e) => {
    setValue(e.target.value);
  };

  const handleSelect = (address) => {
    setValue(address, false);
    clearSuggestions();
    onSelect(address);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleInputChange} placeholder="Search..." />
      {status === 'OK' && (
        <ul>
          {data.map((suggestion, index) => (
            <li key={index} onClick={() => handleSelect(suggestion.description)}>
              {suggestion.description}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default MapContainer;

方案二：使用Google Map实例的panTo方法（更流畅的过渡） #

如果希望地图有平滑移动的效果，可以直接调用map实例的panTo方法，无需更新center状态：

// 修改handleSelect函数
const handleSelect = async (address) => {
  try {
    const results = await getGeocode({ address });
    const { lat, lng } = await getLatLng(results[0]);
    setSelectedPlace({ address, lat, lng });
    // 直接调用map实例的panTo方法
    if (map) {
      map.panTo({ lat, lng });
    }
  } catch (error) {
    console.error('Error:', error);
  }
};

为什么之前的key方法无效？ #

虽然修改key会强制组件重新挂载，但你的center属性始终是固定值，所以即使地图重新渲染，中心坐标还是没变，自然看不到效果。而且强制重渲染会导致地图重新加载，影响用户体验和性能，完全没必要。

内容的提问来源于stack exchange，提问作者Maheen Nasir