Google Maps Javascript API在生产中引发InvalidKeyMapError

如何解决Google Maps Javascript API在生产中引发InvalidKeyMapError

我的代码在localhost上运行良好，我使用google-map-react包在我的react应用程序上呈现地图，但是当我在QA或PROD环境中合并代码时，地图被加载了一秒钟，然后显示错误并且当我检查控制台窗口时，即使我提供了API密钥，它也会显示“ InvalidKeyMapError”。

这是我的代码：

import React,{ useState } from 'react';
import GoogleMapReact from 'google-map-react';
import Marker from './marker';
import APIUrls from "../../../services/urls";


const GoogleMap = (props) => {
 const defaultCenter = {
      lat: 59.95,lng: 30.33
}
const center = {
    lat: 59.95,lng: 30.33
 }
  const zoom= 11
  
return (
    <div style={{ height: '100vh',width: '100%' }}>
    <GoogleMapReact
        yesIWantToUseGoogleMapApiInternals
        bootstrapURLKeys={{ key: APIUrls.googleMapsAPIKey }}
        defaultCenter={defaultCenter}
        defaultZoom={zoom}
        center={center}
    >
      <Marker
        lat={59.955413}
        lng={30.337844}
        text="My Marker"
      />
    </GoogleMapReact>
  </div>
  );
 }

export default GoogleMap;

解决方法

Google在InvalidKeyMapError上的documentation说：

包含在加载API的脚本元素中的API密钥不是 找到了。请确保您使用的API密钥正确。您可以 在Google Cloud Platform Console中生成一个新的API密钥。

您在哪里提供API密钥？您是从本地主机上使用的同一文件添加还是导入它？您的API密钥可能没有插入到Maps API脚本中，因为产品环境没有像本地主机一样将API密钥纳入考虑范围。我会仔细检查一下，并通过在prod中对密钥进行硬编码来对其进行测试。

如果确实渲染了密钥，但是您仍然遇到错误，请尝试完全unrestricting。现在可以用吗？如果是这样，请确保为生产域添加适当的引荐来源网址限制。例如：*.production-domain.com/*。