Google Maps JavaScript API 未显示在我的 React 应用程序中答案

【问题标题】：Google Maps JavaScript API not displaying in my React appGoogle Maps JavaScript API 未显示在我的 React 应用程序中
【发布时间】：2021-06-08 18:37:53
【问题描述】：

我正在使用前端/后端构建一个站点，并且必须使用 Google Maps JS API。我正在渲染这个：

  render(){

  return (
    
    <body>
    <script src="./mapa.js"></script>
    <nav>    
    <ul class= "nav-links">
      <li><a href="#"> <img class = "home_img" id = "1" src = {home} ></img> <div id="texto1"> <p>Home</p></div> </a></li>
      <li><a href="#"> <img class = "home_img" id = "2" src = {alertas}></img>  <div id="texto2"><p>Alertas</p></div> </a></li>
      <li><a href="#"> <img class = "home_img" id = "3" src = {dashboards} ></img>  <div id="texto3"><p>Dashboards</p></div></a></li>
      <li><a href="#"> <img class = "home_img" id = "4" src = {locais} ></img> <div id="texto4"> <p>Os seus locais</p></div> </a></li>
      <li><a href="#"> <img class = "home_img" id = "5" src = {ajuda} ></img> <div id="texto5"> <p>Ajuda</p></div> </a></li>
    </ul>
    <div class="burger" onClick={()=>this.abreBarra()}>
      <div class = "line1"></div>
      <div class = "line2"></div>
      <div class = "line3"></div>
    </div>
    <div class= "logo">
      <h4>Crowdzero</h4>
    </div>
    </nav>
    <div id="map"></div>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=my_api_key&callback=initMap&libraries=&v=weekly"
      async
    ></script>
    </body>
  );
  }

我有显示地图的 CSS：

#map {
   height: 400px;
   width: 100%;
 }

我有脚本让它工作：

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

我什至只用 3 个文件创建了一个单独的项目：html、css 和 js，并使用了相同的代码，并且在那里完美运行，但是当我在 React 应用程序中对其进行编码时，它没有显示出来。虽然它确实显示了 div 应该在的位置，就像您在图像中看到的那样，但它没有显示地图。

我的控制台中也出现这些错误，但我认为它们与此问题无关：

【问题讨论】：

我在您的控制台上看到了几个错误。我想知道这些是否会让您更好地了解正在发生的事情。您能否发布控制台错误/警告的图像？
你有错误。
第一个错误只是语法问题，但我怀疑这会是罪魁祸首。在任何情况下，你都需要解决这个问题，因为 react 组件必须有 className 而不是 class。第二个似乎更有可能是问题所在。我没有意识到你的组件中有一个 body 标签。您的组件已经在文档正文中呈现，因此在初始化地图时这可能会弄乱您的选择器。最后一件事，我建议将 .mapa.js 也移到组件之外，并放在主页的末尾。
好的，所以我只是修复了您所说的所有内容，除了一件事：当我删除标记时，整个 html 代码都会出错。图片：media.discordapp.net/attachments/656598463638798357/…
所以，有两件事，我也会把你的其他脚本标签移到外面，我意识到你还有两个。最后，我相信它给你错误的原因是因为它没有封装在任何东西中。通常，您需要将组件包装到“某物”中，通常只是一个 div。所以，我会把脚本拿出来，把剩下的放在一个 div 里。

标签： javascript reactjs google-maps google-api jsx

【解决方案1】：

在留下一些 cmets 并阅读您的代码之后：P.

这是我的建议：

你的主 HTML，或 cshtml，或任何你用来加载你的 JS 的东西，应该有：

<script src="https://maps.googleapis.com/maps/api/js?key=my_api_key&callback=initMap&libraries=&v=weekly" async></script>
<script src="./mapa.js"></script>
<script ="{the path for your main app}"></script>

你的组件应该是这样的：

....
    
render(){
    return(
        <div>
            <nav>    
            <ul class= "nav-links">
              <li><a href="#"> <img class = "home_img" id = "1" src = {home} ></img> <div id="texto1"> <p>Home</p></div> </a></li>
              <li><a href="#"> <img class = "home_img" id = "2" src = {alertas}></img>  <div id="texto2"><p>Alertas</p></div> </a></li>
              <li><a href="#"> <img class = "home_img" id = "3" src = {dashboards} ></img>  <div id="texto3"><p>Dashboards</p></div></a></li>
              <li><a href="#"> <img class = "home_img" id = "4" src = {locais} ></img> <div id="texto4"> <p>Os seus locais</p></div> </a></li>
              <li><a href="#"> <img class = "home_img" id = "5" src = {ajuda} ></img> <div id="texto5"> <p>Ajuda</p></div> </a></li>
            </ul>
            <div class="burger" onClick={()=>this.abreBarra()}>
              <div class = "line1"></div>
              <div class = "line2"></div>
              <div class = "line3"></div>
            </div>
            <div class= "logo">
              <h4>Crowdzero</h4>
            </div>
            </nav>
            <div id="map"></div>
        </div>
    );
}

....

另外，请确保初始化地图的调用发生在您渲染组件之后之后，否则，地图将无法使用任何东西。也许您可以在您拥有的相同组件上进行该调用，例如：

componentDidMount() {
  let map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });

}

【讨论】：