react-google-maps 未显示并且可能无法请求到 api

Question

我真的需要一些帮助。我的 React 项目不能很好地处理 React google 映射。我尝试了其他拥有它但仍然有效的项目，但现在我正在创建一个它不起作用的新项目。每当我查看 google 控制台时，请求都没有加起来，我的 React 项目仍然是空白的。我也已经在 css 中设置了 div 的宽度到高度：100vh 和宽度：100%

组件代码

import React, { useState, useEffect } from 'react'
import '../css/Home.css';
import { GoogleMap, withScriptjs, withGoogleMap, Marker, InfoWindow } from 'react-google-maps'
import Axios from 'axios';

function Map(){

  const [coords, setcoords] = useState({ lat: "", lng: "" });

  // navigator.geolocation.watchPosition((position) => {
  //   console.log(position);
  // })

  return(
      <GoogleMap 
        defaultZoom={15} 
        defaultCenter={{ lat: 14.706010, lng: 121.086983 }}
      >
      </GoogleMap>
  )
}

const WrappedMap = withScriptjs(withGoogleMap(Map));

function Home() {
  return (
    <div id='div_home'>
      <WrappedMap 
        googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=MY_KEY_I_JUST_REMOVED_IT`}
        loadingElement={<div style={{height: '100%'}} />}
        containerElement={<div style={{height: '100%'}} />}
        mapElement={<div style={{height: '100%'}} />}
         />
    </div>
  )
}

export default Home

Answer 1

我的问题已经解决了。原来我有一个反应和 react-dom v.18 的东西，我安装了 17.0.2 版本并且它完全有效！只是版本有问题。

react-google-maps 未显示并且可能无法请求到 api

react-google-maps not showing and probably not able to request into the api

javascript

google-maps

reactjs

react-google-maps