谷歌地图v3 api无法在引导程序中正确呈现(不涉及标签)

时间:2016-03-30 21:39:22

标签: css twitter-bootstrap google-maps rendering

我现在正在尝试几天来解决谷歌地图在网站上无法正确呈现的问题。 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宽度&高度到地图画布

  • 指定父div宽度&身高.gm风格

  • CSS:分配宽度& px到画布的高度

  • CSS:分配宽度&高度100%到画布

  • CSS:分配宽度& px&组合的高度100%到画布

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

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

思考&观察:

问题是零星的,这让我相信它与加载时间有关 画布在初始化之前已经具有正确的尺寸并且完全可见(即没有隐藏的标签等) Google徽标,报告错误,联系人等附加按钮均可见且尺寸合适。我相信这意味着谷歌地图无论出于何种原因都无法在整个画布上渲染,同时仍能检测到正确的尺寸

用于查找解决方案的关键字: 谷歌地图API v3问题,谷歌地图渲染问题,谷歌地图左上角,谷歌地图Bootsstrap问题

我试图尽可能地简化html代码,以防你想看看https://apptest.voiceoffriends.com/user.html

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

1 个答案:

答案 0 :(得分:0)

问题在于:

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

                    };

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