Django - 部署时 Google Maps API Uncaught in promise 错误

Posted 2023-02-24

【中文标题】Django - 部署时 Google Maps API Uncaught in promise 错误

【英文标题】：Django - Google Maps API Uncaught in promise error when deployed

【发布时间】：2021-07-12 02:04:59

【问题描述】：

我正在使用 Google maps javascript Api 在我的网站上显示地图。 lat 和 long 是从两个 html 标签接收的，这些标签从模型中获取信息。该代码工作并显示模型的每个实例的地图。但是，它仅在 localhost 上 100% 有效，当我将站点部署到 Heroku 时，它仅在某些时候有效。有时地图会显示，有时不会。当它不显示时，它会给我一个Uncaught (in promise) 错误。

HTML

<!-- The two tags I'm getting the lat and long from -->
<input type="hidden" id="hidden_lat" name="lat" value="object.author.profile.detail_lat">
<input type="hidden" id="hidden_lng" name="lng" value="object.author.profile.detail_lng">

<!--Displays map -->
<div id="main_top">
  <div id="main">
   <div id="right">
     <div id="map"></div>
   </div>
 </div>
</div>
          
<script async
 src="https://maps.googleapis.com/maps/api/js?key=NICE_TRY=initMap">
</script>

CSS

           <style>
                #main_top 
                    margin-left: 100px;
                
              #right 
                height: 70%;
                
              #main 
                height: 400px;
                
              #map 
               height: 100%;
               width: 900px;
               
            </style>

Javascript

            function initMap() 
                var lat = +document.getElementById('hidden_lat').value   
                var lng = +document.getElementById('hidden_lng').value
                const map = new google.maps.Map(document.getElementById("map"), 
                  zoom: 12,
                  disableDefaultUI: true,
                  gestureHandling: "none",
                  zoomControl: false,
                  center:  lat: lat, lng: lng ,
                  
                );
                const image = "https://upload.wikimedia.org/wikipedia/commons/8/8e/Pan_Blue_Circle.png";
                const beachMarker = new google.maps.Marker(
                position:  lat: lat, lng: lng ,
                map,
                icon: image,
                );
              

The error thats showing

【参考方案1】：

如果有人遇到类似问题。 API 与 heroku 服务器延迟相结合导致了竞态条件，因此不要在 API 脚本上使用 async，而是使用 defer。