0

我遇到了一个非常奇怪的问题，只能在我们的一个环境中重现。我尝试调试它，发现只要画布宽度为 800px 或更小，它就会渲染。但是，地图变得非交互式，我无法再通过 map.getBounds() 获得边界。指定的中心点也不会绘制在地图上。

这在我们所有的开发笔记本电脑上运行良好。当我们将它部署到测试环境时它就不起作用了。有没有人遇到过这个问题？

这是我通过电话发送的数据。

var options = {
    "zoom": 16,
    "center": new google.maps.LatLng(37.808582967132, -122.41495248394),
    "mapTypeId": "roadmap",
    "disableDefaultUI": true,
    "scrollwheel": false,
    "draggable": false,
    "disableDoubleClickZoom": true
};

new google.maps.Map(document.querySelector('#map_canvas'), options);

指定了 API 密钥，并且在开发笔记本电脑上使用了相同的密钥，所以我认为情况并非如此，但谁知道呢。

更新：

似乎即使我减小了容器元素的大小，它也只返回地图的静态图像，这就是为什么它不是交互式的，也是为什么它只在宽度最多为 800 像素时才呈现的原因。我尝试在我们的生产环境和几台笔记本电脑中使用相同的 API 密钥，它们都可以正常工作。它只是在我们拥有的测试环境中不起作用。我已经仔细检查以确保 API 没有被初始化两次并且我们使用的是 v3 API。下一个测试是复制整个环境并更改域名以查看它是否受到 Google 的某种限制。我已经看到有些人由于互联网连接而遇到问题，但我怀疑情况是否如此，因为无论互联网有多快，它都无法始终如一地工作。

4

1 回答 1

1

在花了相当多的时间进行实验之后，我终于找到了解决我所面临问题的方法。我仍然不太清楚为什么我必须这样做，但它似乎可以解决问题。

我忘记提及的关键不同之处在于，所有 Javascript 文件都在地图无法正常工作的环境中被缩小。这意味着脚本加载速度更快，并且可能在加载 Maps API 之前执行，因为它是在内部动态加载的。正因为如此，我认为如果我注册一个回调，问题就会解决，但事实并非如此。

最终我设置了超时来切换上下文。到目前为止，这工作非常可靠。

setTimeout(function(){
    /*map loading logic*/
}, 1);
于 2013-12-07T08:33:11.347 回答