2

我正在尝试让 Google Maps API v3 在我的网站上运行，但遇到了 2 个问题。

  1. 我正在使用yepnope异步加载 API 脚本，我在控制台中收到“X-Frame-Options 拒绝加载”错误。它说http://maps.googleapis.com/maps/api/js?sensor=false&callback=init_google_maps&ver=3.0不允许跨域框架。这对我来说很奇怪，因为我没有在任何类型的框架中加载任何内容。请注意，地图仍在加载，但控制台中的错误与我有关。

  2. 地图控件未正确显示。我不认为这与第一个问题有关，因为即使我以传统方式（同步）加载 API 时我也会得到这个，但它可能以某种方式相关。

在此处输入图像描述

我不确定这是否重要，但我在我的“localhost”测试服务器上运行它。关于可能导致这些问题的任何想法？

更新： 如下所述，X-Frame 问题仅在我通过 yepnope 加载 API 时发生。我不明白为什么使用 yepnope 注入脚本标签会导致错误，而使用更简单的 js 函数却不会。然而，我主要关心的是地图的显示。我在本地服务器上更精简的页面上测试了地图，它显示正确。所以，我目前的假设是我在页面某处声明的样式（或脚本？）干扰了谷歌地图。

更新2： 好的，如果最终解决了显示问题。我浏览了我的主要样式表并注释掉了部分，直到我找到了罪魁祸首。为了使我的图像在我的流畅布局中响应，我声明了img { max-width: 100%; }. 显然，谷歌地图不喜欢这样。一旦我为地图容器覆盖了该样式，一切都会正常显示。然而，X-Frame 问题仍然让我感到困惑。

4

1 回答 1

1

关于第一个问题，如果你想异步加载 Maps API，我建议直接使用API 文档中描述的技术（一个简单的动态插入<script>元素）而不是 yepnope。这样应该可以正常工作。

关于第二个问题，running onlocalhost没问题；这是测试 Maps API 页面的常规方法。localhost://（我假设您的意思是使用本地 Web 服务器并从URL 而非URL将页面加载到浏览器中file://。）

像这样的一些症状可能是由于地图容器元素在首次创建地图时没有正确调整大小造成的。特别是，尝试使用height:100%可能会出现问题。但是如果没有看到一个运行的例子就很难猜到。您可以将代码发布到某处的网页吗？如果没有别的，甚至可能在JSFiddle中。

于 2013-03-28T07:41:22.483 回答