问题描述
我的代码在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/*
。