`Google Maps API 警告：NoApiKeys` 尝试访问 Youtube Data Api v3 时

Posted 2023-02-24

【中文标题】`Google Maps API 警告：NoApiKeys` 尝试访问 Youtube Data Api v3 时

【英文标题】：`Google Maps API warning: NoApiKeys ` when trying to access Youtube Data Api v3

【发布时间】：2016-07-04 14:10:20

【问题描述】：

我正在关注 Modern Redux With React 教程，并尝试访问 Youtube Data API v3，但在 Chrome 控制台中我收到错误 Google Maps API warning: NoApiKeys。我不确定为什么会收到 Google Maps 警告，因为我为 Youtube 注册了 API 密钥。

单击转到凭据。

点击“API Key”。

点击“浏览器”。

设置名称并点击创建。

将 API 复制并粘贴到 JS 文件中。

import React, Component from 'react';
import * as ReactDOM from "react/lib/ReactDOM";
import YTSearch from 'youtube-api-search';

import SearchBar from './components/search_bar';


const API_KEY = 'AIzaSyD9WN2t4lhIZ5Es34jwaerM98r2nSutLJs';


class App extends Component 

  constructor(props) 
    super(props);

      this.state = videos: [];

    YTSearch(key: API_KEY, term: 'surfboards', (videos) => 
      console.log(data);
      this.setState(videos);
    );
  

  render() 
    return (
      <div>
        <SearchBar />
      </div>
    );
  


ReactDOM.render(<App />, document.querySelector('.container'));

【参考方案1】：

这是因为您的 index.html 文件中有“maps.googleapis.com/maps/api/js”。注释掉该行以防止谷歌地图在没有密钥的情况下尝试加载

【参考方案2】：

您必须在未指定 API 密钥的情况下加载 Google Maps API。

查看 Chrome 开发工具的“网络”选项卡，看看是否有任何内容正在加载 /maps/api/js - 然后尝试追踪您的代码的哪一部分正在拉入 Google Maps API。