html - 在任何网络浏览器中都非常奇怪的显示行为

Question

我正在从事一个使用谷歌地图的元素。我使用 HTML5 地理定位来设置 map 。 如果不支持或拒绝地理定位，那么我会任意设置 map 中心。

我的问题是关于两件事:

• 关于谷歌地图加载的第一个问题:本地理定位被接受时， map 加载异常缓慢(我现在在中国，这可能是一个原因吗？)。在 Firefox 中它甚至从不加载...虽然没有 javascript 错误。

• 更普遍的是，整个网站的显示非常有问题。充分缩小 map 后，您应该会看到显示的标记。这很好，但特定内容通常在 map 下可见。此内容几乎不可见，或者被一个丑陋的黑色 block 隐藏在整个窗口的宽度上......

我正在使用 Bootstrap (包括响应式 CSS 文件和 javascript 插件)、awesomefont 和一些额外的 javascript 代码。

你有什么想法吗？特别是第二点让我抓狂……

谢谢

编辑 如果我不给出检查问题的网址，你怎么能帮我:it's here

Answer 1

http://victorinox.pythonanywhere.com/static/js/manager_functions.js 中有错误, 第 143 行:

map.setCenter(google.maps.LatLng(loc.coords.latitude, loc.coords.longitude));

必须是

map.setCenter(new google.maps.LatLng(loc.coords.latitude, loc.coords.longitude));
//------------^

What else: Firefox doesn't fire the error-callback when the user denies the permission for HTML5-geolocation. Because of that and the fact that there hasn't been set a center for the map anywhere else the map will not load, because center is a required option.

You may think the center will be set in initialize, but in firefox initialize never will be called when the user denies the permission for geolocation. Take a look at this:

$(function() {
     //creates the map, no center will be set in createMap()
    map = createMap();
     //in firefox there will not be set a center
     //when user denies permission, because error-callback will not execute
    geolocalize();
     // when the map 
    center = map.getCenter();
     //will never run, because when the map doesn't have a center 
     //there will no tiles load
    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
        initialize();
    });
})

建议: 目前你有一个闪烁的标记礼物。您在多个事件(zoom_changed、dragend、resize)上重新加载标记，删除所有标记并根据 XHR 响应创建新标记。

相反，您应该为标记创建一个缓存(您可以在其中识别它们，例如，基于 XHR 响应给出的一些 ID)。 当您获得新响应时，仅当它们不在缓存内时才创建新标记，其他标记在 map 上保持可见(当您删除/隐藏视口(viewport)内不可见的标记时，我看不到任何好处)

此外，仅更新 bounds_changed 上的标记而不是 3 个事件应该就足够了。