Question

我遇到了一个非常奇怪的问题，只能在我们的某个环境中重现。我尝试调试它，我发现只要画布宽度为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密钥，并且在开发笔记本电脑上使用了相同的密钥，因此我认为不是这种情况，但谁知道。

更新

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

Answer 1

在花了不少时间进行实验后，我终于找到了解决我遇到的问题的方法。我仍然不太确定为什么要这样做，但它似乎可以解决这个问题。

我忘了提到的关键不同之处在于，在地图无法正常工作的环境中，所有Javascript文件都会缩小。这意味着在加载Maps API之前加载脚本的速度要快得多，因为它是在内部动态加载的。因为我认为如果我注册回调，问题就会解决，但情况并非如此。

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

setTimeout(function(){
    /*map loading logic*/
}, 1);

谷歌地图渲染静态图像而不是全功能地图

更新

1 个答案: