css - Google map v3 api 无法在 Bootstrap 中正确呈现(不涉及选项卡)

Question

我现在已经尝试了几天来解决谷歌地图在网站上未正确呈现的问题。 See Screenshot of correct and false rendering .

我现在很绝望，希望您能提示问题出在哪里。最坏的情况是为其他人收集了一系列可能的解决方案 :)我看到的行为是:

• 列表项 map 已部分加载左上角
• 列表项双击未渲染区域会在第一个较小的 map 下方创建第二个 map
• 列表项如果页面快速多次重新加载，则大约 10-30% 的 map 显示时间已得到纠正

目前尝试过但没有成功的解决方案: - 调整 map 大小 google.maps.event.trigger(map, 'resize')

• 收到空闲状态后调整 map 大小google.maps.event.addListenerOnce(map, 'idle', function() {google.maps.event.trigger(map, 'resize');});

• 同时调整 map 大小和设置中心

• 使用按钮手动触发调整大小事件

• 文档准备好后初始化 map $(document).ready(function() {initialize();});

• 在 settimeout 最多 10 秒后初始化 map setTimeout(initialize, 1000);

• 检测父 div 宽度和高度，仅在足够大时才初始化

• 将父 div 宽度和高度分配给 map-canvas

• 将父 div 宽度和高度分配给 .gm-style

• CSS:使用 px 为 Canvas 分配宽度和高度

• CSS:将 100% 的宽度和高度分配给 Canvas

• CSS:将 px 和 100% 的组合分配给 Canvas 的宽度和高度

• CSS:更改最大宽度 #map-canvas img {max-width: none !important;}

• CSS:更改最大宽度 #map-canvas img {max-width: none !important;}

想法与观察:

问题是零星的，这让我相信它与加载时间有关 Canvas 在初始化之前已经具有正确的尺寸并且完全可见(即没有隐藏的选项卡等)其他按钮(如 Google Logo 、报告错误、联系人等)可见且大小合适。我相信这意味着无论出于何种原因，Google Map 都无法在完整 Canvas 上呈现 map 本身，同时它仍能检测到正确的尺寸

用于查找解决方案的关键字:Google Map API v3 问题、Google Map 渲染问题、Google Map 左上角问题、Google Map Bootsstrap 问题

我尽量简化了 html 代码，以防你想看一看 https://apptest.voiceoffriends.com/user.html

预先感谢您提供有关如何修复错误的任何提示或方法。

Answer 1

问题是这样的:

  function NoGeoLocationFound() {
                        clearTimeout(location_timeout);
                        var pos = new google.maps.LatLng();
                        map.setCenter(pos);

                    };

pos 不是有效的 LatLng(缺少参数)