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/*

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...