0

我们有一个在 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 调用似乎都很好。

4

1 回答 1

0

感谢@Capitaine 和@i-- 的评论，我得到了它的工作。

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

最后，我使用Google Maps 文档将我的页面内 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。

于 2013-03-06T03:52:04.827 回答