我想将 google map api 集成到我的 react 项目中，但出现错误答案

【问题标题】：I wanna integrate google map api to my react project but I get an error我想将 google map api 集成到我的 react 项目中，但出现错误
【发布时间】：2021-07-14 16:12:54
【问题描述】：

我安装了 react-google-map 包
我添加了这个组件

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
 
const AnyReactComponent = ({ text }) => <div>{text}</div>;
 
class SimpleMap extends Component {
  static defaultProps = {
    center: {
      lat: 59.95,
      lng: 30.33
    },
    zoom: 11
  };
 
  render() {
    return (
      // Important! Always set the container height explicitly
      <div style={{ height: '100vh', width: '100%' }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key:"AIzaSyAEKXIE54WnL96aA4qln5bEzU3uOGKqhyo" }}
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
        >
          <AnyReactComponent
            lat={59.955413}
            lng={30.337844}
            text="My Marker"
          />
        </GoogleMapReact>
      </div>
    );
  }
}
 
export default SimpleMap;

我将此脚本添加到 index.html

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSECsV11t3FDisUFwLb5btHY-EWcP24uio&callback=initMap">
    </script>

错误说：

哎呀！出了点问题。

此页面未正确加载 Google 地图。有关技术详情，请参阅 JavaScript 控制台

JS 控制台显示这些错误：

index.js:1 Google Maps JavaScript API 错误：ApiNotActivatedMapError
无法加载 js?key=AIzaSyAECsV11t3FDisUFwLb5btHY-EWcP24uio&callback=initMap:1 资源
CORS 策略已阻止从源“http://localhost:3001”访问“https://maps.googleapis.com/maps/api/js?key=AIzaSyAECsV11t3FDisUFwLb5btHY-EWcP24uio&callback=initMap”获取数据：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

【问题讨论】：

标签： reactjs

【解决方案1】：

我在查看ApiNotActivatedMapError for simple html page using google-places-api后解决了这个问题
但是当地图打开时，文本会过度播放：仅用于开发目的:(

【讨论】：