我正试图在React应用程序中添加一个谷歌Map到我的页面,并在一个位置上放置一个大头针。
当我将APIKEY硬编码到组件中时,
bootstrapURLKeys={{ key:
'<api=key'
}}
但是当我把API密钥放在一个.env文件中时,它就不起作用了(我知道.env文件并不完全安全,因为密钥可以在google上的开发工具中读取,但我现在并不太担心这一点。)
到目前为止,我的Map组件中已经有了这些内容,
<GoogleMapReact
bootstrapURLKeys={{ key:
`${process.env.REACT_APP_GOOGLE_API_KEY}`
}}
defaultCenter={location}
defaultZoom={zoom}
>
我有console.log(
${process.env.REACT_APP_GOOGLE_API_KEY} )
,它按预期记录。但当我运行应用程序时,我得到一个错误,
util.js:66 Google Maps JavaScript API warning: InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key
在我.env
文件中,
REACT_APP_GOOGLE_API_KEY=<api=key>;
1条答案
按热度按时间kb5ga3dv1#
我解决了这个问题。我不需要
;
在.env文件中,因为它是添加到api密钥,这就是为什么谷歌说它是无效的