4

私はng-mapAngular アプリで Google マップを表示するために使用していますが、これは JS の質問 (または単なる CSS ですか?) かもしれません。

レスポンシブ デザインを実装して、デスクトップ/モバイル、または単にユーザーがブラウザー ページのサイズを変更するだけであるかどうかにかかわらず、さまざまなディスプレイ サイズでマップが適切に表示されるようにするにはどうすればよいですか?

このページはそれを行いますが、I フレームを使用し、静的マップしかありませんが、実行時にマップを更新します (定期的に追跡します)。

私はこれらすべてにかなり慣れていないので、私の質問を理解できるように表現したことを願っています.

4

4 に答える 4

3

良い質問。

CSS メディア クエリの組み合わせを使用して、マップを配置する div のブレークポイントを設定する必要があります (多くの画面サイズはここにありますhttp://screensiz.es/phone ) と、リッスンする Google マップ APIサイズ変更イベントに応答します。

マップの中心を設定すると、ロード時に常にウィンドウの中心になります。ただし、ウィンドウのサイズ変更をリッスンしてからマップの中心を再設定する場合は、いくつかの基本的な Google マップ APIv3 メソッドを使用して中心を計算し、リセットすることができます。

これは、あなたが求めていると思われるものの実際の例の要点です。例として、上記のSai Ram Sudheerの回答からいくつかのメディアクエリを投げました(この場合、マップは画面全体を占めるため、その大きなマップでは重要ではありません)。

中心を計算して再設定するために必要な実際のコードは、ほんの数行です (map.js ファイルを見てください)。

https://gist.github.com/markthethomas/5da15a050f560cc58d4f

サイズ変更に関連するコードは次のとおりです。マーカーと境界をもっと使いたい場合は、関数を記述しcenterて、プログラムやパラメーターの意味を判断する必要があります (つまり、フレームに収まるマーカーの数、表示するマーカーなど)。

// create a variable to hold center
  var center;
// calculate the center with getCenter
  function calculateCenter() {
    center = map.getCenter();
  }
// Add an event listener that calculates center on idle  
  google.maps.event.addDomListener(map, 'idle', function() {
    calculateCenter();
  });
  // Add an event listener that calculates center on resize  

  google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
  });

これが少し役立つことを願っています！

于 2014-06-16T17:40:01.773 に答える
2

メディアクエリを使用してこれを行うことができますクラスマップでマップdivを検討してください

css: デバイスの div 幅に合わせて div を中央揃えにすることを検討してください。

   // show maps in a div with width 600px when you're on a big screen
//and div width of 160px in a device of 320px 
@media screen and (min-width: 1200px) {
    .maps{
        width:600px;
    }
}
@media screen and (max-width: 320px) {
        .maps{
            width:160px;
        }
    }

一般的なデバイス ブレークポイントのリストを次に示します。

   /* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
于 2014-06-10T11:25:23.483 に答える