2

サイトで Google Maps API v3 を動作させようとしていますが、2 つの問題が発生しています。

  1. API スクリプトを非同期的にロードするためにyepnopeを使用していますが、コンソールに「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 を使用して script タグを挿入するとエラーが発生し、より単純な js 関数を使用してもエラーが発生しない理由がわかりません。ただし、私の主な関心事は、マップの表示です。ローカル サーバーのより簡素化されたページでマップをテストしたところ、正しく表示されました。だから、私の現在の仮定は、Google マップを妨害しているページのどこかに宣言されたスタイル (またはスクリプト?) があるということです。

更新 2: OK、表示の問題が最終的に解決された場合。メインのスタイルシートを調べて、犯人が見つかるまで一部をコメントアウトしました。流動的なレイアウトで画像をレスポンシブにするために、 を宣言しimg { max-width: 100%; }ました。どうやら、Google マップはこれを好まないようです。マップ コンテナのスタイルをオーバーライドすると、すべてが正常に表示されました。ただし、X-Frame の問題は依然として私を混乱させます。

4

1 に答える 1

1

最初の問題に関しては、Maps API を非同期でロードする場合は、yepnope の代わりに、 API ドキュメントで説明されている手法(単純な動的に挿入された要素) を直接使用することをお勧めします。<script>そうすればうまくいくはずです。

2 番目の問題では、実行localhostは問題ありません。これは、Maps API ページをテストする通常の方法です。localhost://(ローカル Web サーバーを使用し、 URL ではなく URLからブラウザーにページをロードすることを意味していると思いfile://ます。)

このような症状は、マップが最初に作成されたときにマップ コンテナー要素のサイズが適切に設定されていないことが原因である可能性があります。特に、使用しようとするheight:100%と問題が発生する可能性があります。しかし、実行例を見ずに推測するのは困難です。コードを Web ページのどこかに投稿できますか? 他に何もない場合でも、おそらくJSFiddleでさえ。

于 2013-03-28T07:41:22.483 に答える