Google 地图自动完成功能开始出现“此页面无法正确加载 Google 地图”错误

Question

我有一个 React + Typescript 应用程序，它显示地址文本输入和地图。 我已将自动完成连接到输入元素，一切正常。 我构建了它并将其作为静态站点部署到 AWS S3，一切都很好。 当我对本地代码进行更多编辑时，本地版本开始出现上述错误（我愚蠢地没有保存代码）。 我在本地使用 vite 运行。

MyMap 组件使用 @googlemaps/react-wrapper 进行包装：

   <TextField required id="location-id" label="Enter address" variant="standard" />

    :

   <Wrapper apiKey={API_KEY} render={render} libraries={["places"]}>
       <MyMap coords={coords}
              center={center}
              style={{width: "calc(65vw-5)", height: "calc(70vh)"}}
              setPoint={setCenter}
       />
   </Wrapper>

MyMap.tsx：

const options = {
    bounds: <the bounds of my area>,
    componentRestrictions: {country: 'us', state: 'va'},
    strictBounds: false,
    fields: ["address_components", "geometry"],
    types: ["address", "routes", "locality", "intersection"],
};

export default function MyMap(props: propsType){

   :
            setMap(new window.google.maps.Map(ref.current, {
                center: {lat: DEFAULT_LAT, lng: DEFAULT_LNG},
                zoom: DEFAULT_ZOOM,
            }));

        }

      :
       // Set up the autocomplete feature
       const input = document.getElementById('location-id') as HTMLInputElement;
       console.log('found input element: ', input);
       const autocomplete = new window.google.maps.places.Autocomplete(input, options);

我在控制台日志中没有收到任何错误或警告。 我的地点 API 已启用，并且在运行我两天前部署的版本时可以正常工作。 有什么方法可以调试自动完成功能吗？ 我看到正在进行的网络调用，并且它们正在使用 javascript 进行响应，例如“/**/xdc._66hdg9 && xdc._66hdg9([4])”

这就是我现在得到的：

这是我在 AWS S3 网站上看到的内容：

Answer 1

使用以下选项现在可以正常工作：

const options = {
    bounds: defaultBounds,
    componentRestrictions: {country: 'us'},
    strictBounds: false,
    fields: ["address_components"],
    types: ["address"],
};