React Google Maps StandaloneSearchBox 加载问题诊断和解决

2024-03-17 14:23:06

在 React Google Maps 中使用 StandaloneSearchBox 实现搜索栏和标记

导言

在 React 应用中整合 Google Maps 时，添加搜索栏和标记可以显著增强用户体验。StandaloneSearchBox 组件是实现这一目标的理想选择。然而，有时可能会遇到地图处于“加载中”状态的问题，阻碍了用户与搜索栏的交互。本文将深入探讨此问题并提供分步解决方法。

问题：地图处于“加载中”状态

使用 StandaloneSearchBox 组件时，你可能会遇到地图处于“加载中”状态的情况。这通常是由几个常见问题引起的：

API 密钥不正确： 确保在 LoadScript 组件中提供了正确的 Google Maps API 密钥。
加载顺序不当： StandaloneSearchBox 组件应在 GoogleMap 组件加载完成后加载。
缺少加载事件处理： 处理 StandaloneSearchBox 组件的 onLoad 回调，以便在加载后执行操作。

解决步骤

解决地图加载问题涉及以下步骤：

1. 检查 API 密钥

首先，检查你是否在 LoadScript 组件中提供了正确的 Google Maps API 密钥。

2. 确认加载顺序

确保 StandaloneSearchBox 组件在 GoogleMap 组件加载完成后加载。将 StandaloneSearchBox 移至 LoadScript 组件之外。

3. 处理加载事件

使用 onLoad 回调处理 StandaloneSearchBox 组件的加载事件。这将允许你在组件加载后对其进行操作。

4. 自定义输入元素

StandaloneSearchBox 使用默认的输入元素。你可以自定义此输入元素以满足你的需要。

5. 管理状态

在组件状态中管理搜索栏和标记的可见性和位置。

更新代码

将以下更新后的代码集成到你的项目中：

import { useState, useEffect } from 'react';
import {
  GoogleMaps,
  StandaloneSearchBox,
  LoadScript,
  Marker,
  InfoWindow,
} from '@react-google-maps/api';

const Register = () => {
  const [mapRef, setMapRef] = useState(null);
  const [searchBoxRef, setSearchBoxRef] = useState(null);
  const [markers, setMarkers] = useState([]);

  useEffect(() => {
    // Add a marker when the user selects a location from the search box.
    if (searchBoxRef && mapRef) {
      const placesChangedHandler = () => {
        const places = searchBoxRef.getPlaces();

        if (places.length > 0) {
          setMarkers([
            {
              position: places[0].geometry.location,
            },
          ]);
        }
      };

      searchBoxRef.addListener('places_changed', placesChangedHandler);

      // Remove the event listener when the component unmounts.
      return () => {
        searchBoxRef.removeListener('places_changed', placesChangedHandler);
      };
    }
  }, [searchBoxRef, mapRef]);

  const mapContainerStyle = {
    height: '400px',
    width: '800px',
  };

  const center = {
    lat: -3.745,
    lng: -38.523,
  };

  return (
    <div>
      <LoadScript
        googleMapsApiKey='YOUR_API_KEY'
        libraries={['places']}
      >
        <GoogleMap
          id='map'
          mapContainerStyle={mapContainerStyle}
          center={center}
          zoom={10}
          ref={setMapRef}
        >
          <StandaloneSearchBox
            onLoad={setSearchBoxRef}
          >
            <input
              type='text'
              placeholder='Customized your placeholder'
              style={{
                boxSizing: `border-box`,
                border: `1px solid transparent`,
                width: `240px`,
                height: `32px`,
                padding: `0 12px`,
                borderRadius: `3px`,
                boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                fontSize: `14px`,
                outline: `none`,
                textOverflow: `ellipses`,
                position: 'absolute',
                left: '50%',
                marginLeft: '-120px',
              }}
            />
          </StandaloneSearchBox>

          {markers.map((marker, index) => (
            <Marker
              key={index}
              position={marker.position}
            >
              <InfoWindow>
                <div>
                  <strong>Your Location:</strong>
                  <br />
                  {marker.position.lat()}
                  {marker.position.lng()}
                </div>
              </InfoWindow>
            </Marker>
          ))}
        </GoogleMap>
      </LoadScript>
    </div>
  );
};

export default Register;