当我们升级应用程序的 jQuery 库时，Google Maps 失败答案

【问题标题】：Google Maps fails when we upgrade our application's jQuery library当我们升级应用程序的 jQuery 库时，Google Maps 失败
【发布时间】：2013-03-06 00:13:09
【问题描述】：

我们有一个在 jQuery 1.4.2 上运行的应用程序，我们正在慢慢升级到 jQuery 1.9.1

我们正在升级的其中一个页面上现在有一个谷歌地图。从广义上讲，该页面包含...

<head>
  <script src="/javascripts/jquery-1.4.2.min.js?1362527887" type="text/javascript"></script>
  ...
  <script src="/javascripts/google_map.js?1362527225" type="text/javascript"></script>
</head>
<body>
  ...
  <script type="text/javascript">
    $(document).ready(function () {
      new GoogleMap($('#map_canvas'), '<%= APP_CONFIG['google_maps_api_key'] %>');
    });
  </script>
</body>

这会加载 jQuery，然后加载初始化 Google 地图的 javascript 文件，如下所示：

GoogleMap = function (mapElement, apiKey) {
  this.initialized = false;
  this.mapElement = mapElement;
  $.getJSON('http://maps.googleapis.com/maps/api/js?key=' + apiKey + '&sensor=false&callback=?', $.proxy(this.apiLoaded, this));
};

GoogleMap.prototype = {

  apiLoaded:function () {
    this.show();
    var mapOptions = this.defaultLocation();
    this.map = new google.maps.Map(this.mapElement[0], mapOptions);
    ...
  },

  ....
};

在 jQuery 1.4.2 上，这一切都有效。但是，当我们迁移到 jQuery 1.9.1（或 1.6.3 和 1.9.1 之间的任何 jQuery 版本，不管它的价值）时，我在 Javascript 控制台中看到以下错误：

Uncaught TypeError: Property 'jQuery191006026467704214156_1362528404472' of object [object Window] is not a function

此错误发生在 main.js 中，该文件在通过上述调用加载谷歌地图时出现。但是，将 jQuery 版本从 1.4.2 更改为 1.4.3 可以正常工作 - 所以破坏它的不仅仅是“任何更改”。

一个重新创建错误的 JSBin（尽管没有显示地图，即使有 1.4.2，可能是因为我删掉了太多？）在这里：http://jsbin.com/okirac/4/

对于更高版本的 jQuery，我是否需要以不同的方式调用谷歌地图？或者我是否应该以不同的方式使用 jQuery 以避免与谷歌地图发生冲突？

就像我说的，这些地图可以在 jQuery 1.4.2 和页面上的一大堆其他 javascript 调用中正常工作。但是后来的 jQuery 版本打破了页面上的谷歌地图，而所有其他 javascript 调用似乎都很好。

【问题讨论】：

也许你可以在jsbin中做一些单独的测试用例，这样你调试起来更容易，我们也可以帮助你:)
好主意 - 谢谢。以前没有玩过 JSBin，但我提出了一些用 jQuery 1.9.1 重新创建错误的东西，并且没有显示 jQuery 1.4.2 的错误。无法让它显示地图，但这可能是由于从示例中删除了太多内容（可能是一些 CSS）。
和这个api.jquery.com/jQuery.getJSON有什么关系？
我对 .getJSON() 的使用似乎是个问题 - forum.jquery.com/topic/…

标签： jquery google-maps

【解决方案1】：

感谢@Capitaine 和@i-- 他们的cmets，我得到了它的工作。

似乎在 1.4.x 之后的 jQuery，您不能再依赖 jQuery.getJSON() 来对抗 Google Maps，它实际上返回的是 JS，而不是 JSON（请参阅我在原始问题 cmets 中的链接）。

最后，我使用Google Maps documentation 将我的页面内javascript代码更改为：

<script type="text/javascript">
  $(document).ready(function () {
    gmap = new GoogleMap($('#map_canvas'));

    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?key=<%= APP_CONFIG['google_maps_api_key'] %>&sensor=false&callback=gmap.apiLoaded";
    document.body.appendChild(script);
  });
</script>

这会设置一个全局“gmap”对象，然后在 Google Maps API 上定义一个回调参数，这意味着在加载 Maps API 后，它会在我的 gmap 对象上调用 apiLoaded() 函数。

这适用于旧版本和新版本的 jQuery。

【讨论】：