反应：Google 地图 API 密钥 - 警告：NoApiKeys

Question

我创建了一个应该显示 Google 地图的项目，但我不断地在控制台中显示带有水印的地图和警告：Google Maps JavaScript API 警告：NoApiKeys https://developers.google.com/maps/documentation/ javascript/错误消息#no-api-keys。这是 React 代码片段：

import React, { Fragment } from "react";
import { useJsApiLoader, GoogleMap, Marker } from "@react-google-maps/api";

const GoogleMapComp = () => {
  const { isLoaded } = useJsApiLoader({
    googleMapsApiKey: process.env.key,
  });

  const center = { lat: 42.4414, lng: 19.2624 };

  if (!isLoaded) {
    return (
      <div>
        <p>Loading...</p>
      </div>
    );
  }

  return (
    <Fragment>
      <GoogleMap
        center={center}
        zoom={15}
        mapContainerStyle={{
          width: "100%",
          height: "100%",
        }}
        options={{
          zoomControl: false,
          streetViewControl: false,
          mapTypeControl: false,
          fullscreenControl: false,
        }}
      >
        <Marker position={center} />
      </GoogleMap>
    </Fragment>
  );
};

export default GoogleMapComp;

我尝试阅读文档并在谷歌云平台中创建新的API，但似乎没有任何帮助。请帮忙！

Answer 1

您可以：

1. 联系 Google Maps Platform 支持人员，以便他们检查您的项目，确保其设置正确，并且您拥有有效的 API 密钥以及正确设置的限制。 https://developers.google.com/maps/support#contact-maps-support

2. 检查 JS API 加载器是否使用 Maps JavaScript API V3。

3. 查看您的代码时，我注意到 useJSApiLoader() 函数中没有“id”：

    const { isLoaded } = useJsApiLoader({
      id: 'google-map-script',
      googleMapsApiKey: "YOUR_API_KEY"
    })
   
   

https://www.npmjs.com/package/@react-google-maps/api

4. 您还可以前往此处获取更多支持： https://github.com/JustFly1984/react-google-maps-api/issues?page=1&q=is%3Aissue+is%3Aopen