升级应用程序的jQuery库时,Google Maps失败了

时间:2013-03-06 00:13:09

标签: jquery google-maps

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

我们正在升级的其中一个页面上有一个Google Map。从广义上讲,该页面包含......

<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,然后加载javascript文件,该文件初始化我们的Google地图,如下所示:

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,我是否需要以不同的方式调用google地图?或者我应该以不同的方式使用jQuery来避免与谷歌地图的冲突?

就像我说的那样,这些地图在jQuery 1.4.2以及页面上的一大堆其他javascript调用中运行良好。但是更高版本的jQuery在页面上打破谷歌地图,而所有其他的javascript调用似乎都没问题。

1 个答案:

答案 0 :(得分:0)

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

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

最后,我使用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。