Google 地图 v3 api 在 bootstrap 中无法正确呈现(不涉及选项卡)
Google map v3 api not rendering correctly in bootstrap (no tab involved)
我已经尝试了好几天来解决 google 地图在网站上未正确呈现的问题。 See Screenshot of correct and false rendering。
我现在很绝望,希望您能给我提示问题出在哪里。最坏的情况是为其他人收集了一系列可能的解决方案 :)
我看到的行为是:
- 列表项地图左上角已部分加载
- 列表项双击未渲染区域会在第一个较小的地图下方创建第二个地图
- 列表项如果页面被快速重新加载多次,则大约 10-30% 的地图显示时间得到更正
尝试过但目前没有成功的解决方案:
- 调整地图大小 google.maps.event.trigger(map, 'resize')
- 收到空闲状态后调整地图大小
google.maps.event.addListenerOnce(map, 'idle', function() {google.maps.event.trigger(map, 'resize');});
调整地图大小并同时设置中心
使用按钮手动触发调整大小事件
文档准备好后初始化地图
$(document).ready(function() {initialize();});
settimeout最多10秒后初始化地图setTimeout(initialize, 1000);
检测父 div 宽度和高度,仅在足够大时才初始化
将父 div 宽度和高度分配给地图-canvas
将父 div 宽度和高度分配给 .gm 样式
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 徽标、报告错误、联系人等其他按钮可见且大小合适。我相信这意味着 Google 地图无论出于何种原因都无法在完整的 canvas 上呈现,同时它仍然检测到正确的尺寸
用于查找解决方案的关键字:
Google 地图 API v3 问题,Google 地图渲染问题,Google 地图左上角,Google 地图 Bootsstrap 问题
我已经尽可能地简化了 html 代码,以防你想看一看 https://apptest.voiceoffriends.com/user.html
提前感谢您提供有关如何修复错误的任何提示或方法。
问题是这样的:
function NoGeoLocationFound() {
clearTimeout(location_timeout);
var pos = new google.maps.LatLng();
map.setCenter(pos);
};
pos 不是有效的 LatLng
(缺少参数)
我已经尝试了好几天来解决 google 地图在网站上未正确呈现的问题。 See Screenshot of correct and false rendering。
我现在很绝望,希望您能给我提示问题出在哪里。最坏的情况是为其他人收集了一系列可能的解决方案 :) 我看到的行为是:
- 列表项地图左上角已部分加载
- 列表项双击未渲染区域会在第一个较小的地图下方创建第二个地图
- 列表项如果页面被快速重新加载多次,则大约 10-30% 的地图显示时间得到更正
尝试过但目前没有成功的解决方案:
- 调整地图大小 google.maps.event.trigger(map, 'resize')
- 收到空闲状态后调整地图大小
google.maps.event.addListenerOnce(map, 'idle', function() {google.maps.event.trigger(map, 'resize');});
调整地图大小并同时设置中心
使用按钮手动触发调整大小事件
文档准备好后初始化地图
$(document).ready(function() {initialize();});
settimeout最多10秒后初始化地图
setTimeout(initialize, 1000);
检测父 div 宽度和高度,仅在足够大时才初始化
将父 div 宽度和高度分配给地图-canvas
将父 div 宽度和高度分配给 .gm 样式
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 徽标、报告错误、联系人等其他按钮可见且大小合适。我相信这意味着 Google 地图无论出于何种原因都无法在完整的 canvas 上呈现,同时它仍然检测到正确的尺寸
用于查找解决方案的关键字: Google 地图 API v3 问题,Google 地图渲染问题,Google 地图左上角,Google 地图 Bootsstrap 问题
我已经尽可能地简化了 html 代码,以防你想看一看 https://apptest.voiceoffriends.com/user.html
提前感谢您提供有关如何修复错误的任何提示或方法。
问题是这样的:
function NoGeoLocationFound() {
clearTimeout(location_timeout);
var pos = new google.maps.LatLng();
map.setCenter(pos);
};
pos 不是有效的 LatLng
(缺少参数)