时间戳

首页 > 解决方案 > Google Maps JavaScript API 未显示在我的 React 应用程序中

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

问题描述

我正在使用前端/后端构建一个站点，并且必须使用 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 应该在的位置，就像您在图像中看到的那样，但它不显示地图。

显示 div 点但没有地图的图像

我的控制台中也出现了这些错误，尽管我不相信它们与这个问题有关：

在此处输入图像描述

标签： javascriptreactjsgoogle-mapsgoogle-apijsx

解决方案

在留下一些评论并阅读您的代码之后：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,
  });

}

推荐阅读