我想在 Next Js 中过滤 Google 仅针对印度的自动完成建议

Question

我在下一个js项目中使用react-places-autocomplete包，我想过滤掉仅针对印度的建议。我不想向我的用户显示其他国家/地区的任何位置。

我已经尝试过这种方法，但它不起作用：

<PlacesAutocomplete
   value={hospitalAddress}
   onChange={setHospitalAddress}
   options={{
   componentRestrictions: { country: "in" }, // Not Working, still showing places outside of india
   }}
>

这是我的整个代码：

"use client";
import Script from "next/script";
import { useEffect, useState } from "react";
import PlacesAutocomplete from "react-places-autocomplete";
import { HiLocationMarker } from "react-icons/hi";

const PlacesAutocompleteInput = () => {
  const [scriptLoaded, setScriptLoaded] = useState(false);
  const [hospitalAddress, setHospitalAddress] = useState("");

  // load script dynamically
  useEffect(() => {
    const script = document.createElement("script");
    script.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.NEXT_PUBLIC_GOOGLE_MAP_API_KEY}&libraries=places`;

    script.onload = () => {
      setScriptLoaded(true);
    };

    document.head.appendChild(script);
  }, []);

  return (
    <>
      {scriptLoaded && (
        <PlacesAutocomplete
          value={hospitalAddress}
          onChange={setHospitalAddress}
          options={{
            componentRestrictions: { country: "in" }, // Not Working, still showing places outside of India
          }}
        >
          {({
            getInputProps,
            suggestions,
            getSuggestionItemProps,
            loading,
          }) => (
            <div className="w-full">
              <input
                className="border-2 border-sky-100 bg-sky-50 p-2 outline-none text-sm md:text-base w-full"
                {...getInputProps({
                  placeholder: "Type Hospital Address Here",
                })}
              />
              {loading ? <div>Loading...</div> : ""}
              <div className={`${suggestions.length > 0 ? "block" : "hidden"}`}>
                <ul className="shadow-md py-2 px-4">
                  {suggestions &&
                    suggestions.map((suggestion) => (
                      <li
                        key={suggestion.placeId}
                        {...getSuggestionItemProps(suggestion)}
                        className="cursor-pointer border-b py-2 px-2 border-deepGray flex items-center hover:bg-primary hover:text-white"
                      >
                        <div className="w-5 h-5 mr-2 text-primary">
                          <HiLocationMarker />
                        </div>
                        <p>{suggestion.description}</p>
                      </li>
                    ))}
                </ul>
              </div>
            </div>
          )}
        </PlacesAutocomplete>
      )}
    </>
  );
};

export default PlacesAutocompleteInput;

Answer 1

您可以使用此处提到的 searchOptions 属性

  value={this.state.value}
  onChange={this.handleChange}
  searchOptions={{ region: 'in' }}
>