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

【问题标题】：`Google Maps API warning: NoApiKeys ` when trying to access Youtube Data Api v3`Google Maps API 警告：NoApiKeys` 尝试访问 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'));

【问题讨论】：

标签： javascript api youtube youtube-data-api

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：