javascript - 在刷新我的页面之前,Google Maps API 并不总是加载

标签 javascript html google-maps google-maps-api-3 google-api

我遇到了一个间歇性问题,我的 Google map 在最初加载网页时无法加载,导致出现空白 map 。刷新时它将加载而不会出现问题。

这是我在 Chrome 控制台中收到的错误消息:

消息:“initMap 不是函数”
名称:“无效值错误”

我的 map 的 HTML:

   <div class="container-fluid">
     <div id="map"> </div> 
   </div>

JavaScript:

function initMap() {
                var uluru = {lat: 28.0394654 , lng: -81.94980420000002};
                var map = new google.maps.Map(document.getElementById('map'), {
                  zoom: 10,
                  center: uluru,
                  //disableDefaultUI: true,
                  gestureHandling: 'cooperative'

                });
                var marker = new google.maps.Marker({
                  position: uluru,
                  map: map
                });

                var triangleCoords = [
                    {lat: 28.0990114, lng: -82.0035785}, //Kathleen Rd - Lakeland 
                    {lat: 28.0186323, lng: -82.11286410000002}, //Plant City 
                    {lat: 27.8953038, lng: -81.97341719999997}, //Mulberry 
                    {lat: 27.8964147, lng: -81.84313739999999}, //Bartow 
                    {lat: 27.9014133, lng: -81.58590989999999},//Lake Wales 
                    {lat: 28.1141841, lng: -81.61785359999999}, //Haines City 
                    {lat: 28.1825147, lng: -81.8239676} //Polk City 
                  ];

                 var expressCoverage = new google.maps.Polygon({
                    paths: triangleCoords,
                    strokeColor: '#333333',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#333333',
                    fillOpacity: 0.2
                  });
                  expressCoverage.setMap(map);

                }

我已经清除了浏览器中的缓存,但对问题没有任何影响。该问题在 Chrome、Mozilla 和 Mobile Safari 中仍然存在。 map 未加载时,API key 是否发生了问题?

最佳答案

可能会出现“InvalidValueError”,因为您没有使用正确的格式声明“uluru”。 Google Maps API 中的坐标需要采用 LatLng 形式。尝试替换

var uluru = {lat: 28.0394654 , lng: -81.94980420000002};

var uluru = new google.maps.LatLng(28.0394654, -81.94980420000002);

关于javascript - 在刷新我的页面之前,Google Maps API 并不总是加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45156359/

相关文章:

javascript - 在列表组 bootstrap vue js 中仅调用子按钮而不调用父按钮

HTML5 验证 - 看似关闭的未关闭元素

google-maps - 谷歌地图API授权

javascript - 在完成之前重新启动HTML5音频元素(JS:setTimeout)

javascript - 我的应用程序中的所有 facebook uid

javascript - 如何缩放 Canvas 中图像的特定部分

google-maps - 文件 :///的 Google Maps API key 引用

javascript - HTML5 大 Canvas - 移动和缩放包括背景在内的整个内容

javascript - 将两个单独的元素附加到一个动画脚本

java - Android Google Maps Api v2 fragment : NullPointerException error