时间戳

首页 > 解决方案 > Google Maps Javascript API 在生产中抛出 InvalidKeyMapError

javascript - 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;

标签： javascriptreactjsgoogle-mapsgoogle-maps-api-3google-map-react

解决方案

谷歌的文档说InvalidKeyMapError：

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

您在哪里提供 API 密钥？您是从本地主机上使用的同一文件添加或导入它吗？您的 API 密钥可能不会被插入到 Maps API 脚本中，因为 prod 环境没有以与 localhost 相同的方式考虑 API 密钥。我会仔细检查并通过对 prod 中的密钥进行硬编码来测试它。

如果确实呈现了密钥并且您仍然遇到错误，请尝试完全取消限制。它现在有效吗？如果是这样，请确保为您的生产域添加适当的引荐来源网址限制。例如：*.production-domain.com/*。

推荐阅读