0

jQuery 1.4.2 で実行されているアプリケーションがあり、徐々に jQuery 1.9.1 にアップグレードしています。

アップグレード中のページの 1 つに Google マップが追加されました。大まかに言えば、このページには...

<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 で発生します。このファイルは、上記の呼び出しで Google マップが読み込まれるときにダウンします。ただし、jQuery のバージョンを 1.4.2 から 1.4.3 に変更することは問題なく機能します。そのため、それを壊すのは「何らかの変更」だけではありません。

エラーを再現する JSBin はここにあります (ただし、1.4.2 が配置されていてもマップは表示されませんが、切り取りすぎたためでしょうか? )

jQuery の新しいバージョンでは、別の方法で Google マップを呼び出す必要がありますか? それとも、Google マップとの衝突を避けるために、jQuery を別の方法で使用する必要があるのでしょうか?

私が言うように、マップは jQuery 1.4.2 およびページ上の他の JavaScript 呼び出し全体で正常に動作します。しかし、jQuery の新しいバージョンでは、ページ上の Google マップが壊れていますが、他のすべての JavaScript 呼び出しは問題ないようです。

4

1 に答える 1

0

@Capitaine と @i-- のコメントに感謝します。

1.4.x 以降の jQuery では、JSON ではなく実際に JS を返す Google マップに対して作業するために jQuery.getJSON() に頼ることができなくなったようです (元の質問のコメントにある私のリンクを参照してください)。

最後に、Google マップのドキュメントを使用して、ページ内の 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 に答える