0

より広いビューポートでGoogle の静的マップを非表示にし、代わりに動的なGoogle JavaScript マップを表示するには、どのようなアプローチがありますか?

モバイル ファーストの Web サイトを構築することは一般的であり、より大きなビューポート用の CSS メディア クエリによって強化されます。

マップに関して言えば、モバイル UX (スマートフォンも同様)には静的マップの方が優れていることはほぼ間違いありません。しかし、Web サイトの目的によっては、より大きなビューポート (コンピューター ディスプレイやタブレットでさえも) の場合、インタラクティブ/ダイナミック マップの方がユーザーに適していると判断する場合があります。

この 2 つを組み合わせる最適なアプローチを選択するには、どのような基準を使用することが重要ですか? 何に注意する必要がありますか？



決定的な答えを見つけることはできませんでしたが、これまでの私の研究は次のとおりです。

2010 年にある著者は、フォールバック オプションが JavaScipt API に組み込まれていることを提案しました。

ここでの基本的な前提は、API が map_canvasコンテナーのコンテンツをマップ表示に置き換えることです。では、そのコンテナーにフォールバック コンテンツを追加してみませんか?

div彼のコードを変更すると、JS 対応の Google マップになる画像を に挿入できます。この場合、画像は Static Maps V2 のものです。

<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%">
    <img src="http://maps.googleapis.com/maps/api/staticmap?center=Berkeley,CA&zoom=14&size=400x400&sensor=false">
  </div>
</body>

ただし、これはスマートフォンで JavaScript マップを無効にするものではなく、JS を使用しないデバイスにフォールバックを提供するだけです。

別の著者(同じく 2010 年) も、jQuery の 1 行を使用してその画像を非表示にすることを提案しています。V3 の更新コードは次のようになります。

$('#map_canvas img').remove();

しかし、それは、ビューポートが狭いデバイス (スマートフォン) で Google の JS マップを無効にすることにもなりません。

これらのガイドはどちらも 2010 年のものです — おそらく Google マップの V2 を使用しているのでしょうか? (私は2009年に巧妙な正規表現を使用した別の著者のガイドに出くわしましたが、彼はまだ「物事を行う新しい方法[V3]」に更新していません。)

4

1 に答える 1

1

2番目のアプローチ（画像を非表示にする）はまったく役に立ちません。マップが読み込まれると、とにかく画像が置き換えられます。

最初のアプローチは良さそうです。必要なのは、initialize（）の開始時の条件です。ここで、「小さな」デバイスをフィルター処理して関数を終了します。次のようになります。

if(Math.min(screen.width,screen.height)<768){
        return;
}
于 2013-01-06T15:37:52.960 に答える