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

Question

我正在做一个使用谷歌地图的项目。我使用 HTML5 地理定位来设置地图。 如果不支持或拒绝地理定位，则我任意设置地图中心。

我的问题是关于两件事：

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

• 更普遍的是，整个网站的显示非常错误。将地图缩小到一定程度后，您应该会看到显示的标记。没关系，但特定内容通常在地图下可见。此内容几乎不可见，或者被一个遍布整个窗口宽度的丑陋黑色块隐藏...

我正在使用引导程序（包括响应式 CSS 文件和 javascript 插件）、awesomefont 和一些额外的 javascript 代码。

你有什么想法吗？尤其是让我抓狂的第二点……

谢谢

编辑 如果我不提供 URL 来检查问题，你怎么能帮助我：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));
//------------^

还有什么：当用户拒绝 HTML5 地理定位权限时，Firefox 不会触发错误回调。正因为如此，而且在其他任何地方都没有为地图设置中心，地图将不会加载，因为中心是必需的选项。

你可能认为center会在initialize中设置，但在firefox中initialize永远不会在用户拒绝地理定位权限时被调用。看看这个：

$(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）。 当您收到新响应时，仅当它们不在缓存内时才创建新标记，其他标记在地图上保持可见（当您删除/隐藏视口内不可见的标记时，我看不到任何好处）

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