11

私はそれについてたくさんグーグルで調べてきましたが、同じことについてかなりの意見を見つけることができませんでした.

phonegap を使用してアプリを構築するために、静的な Google マップ イメージを jQuery Mobile プロジェクトに組み込む必要があります。マップ イメージは、ビューポートをほぼ完全に埋める必要があります。問題は、さまざまな画面サイズのさまざまなデバイスで明らかに開かれるため、その方法です。私はパーセンテージアプローチを試しましたが、ここではうまくいきません。

Googleマップの静止画像のレイアウトを流動的なレイアウトに保つためのガイダンスを、可能な限り簡単な方法で入手したいと思います（可能であればお願いします）。

ありがとう

4

4 に答える 4

6

最初に必要になる最大の画像サイズをコンテナーにロードします (例: 380 x 250 のサイズ)。

これは position:relative になり、オーバーフローが隠され、必要な最大サイズになります。

figre 
    {
        position:relative;
        width: 100%;
        overflow:hidden;
    }

次に、上と左を使用して画像をコンテナの中央に配置します。

例えば

figure img
    {
        position: absolute;
        top: calc(50% - 125px);
        left: calc(50% - 190px);
        }
于 2014-01-29T16:02:47.913 に答える
1

画面サイズ、ビューポート サイズ、画面解像度などのさまざまな条件に応じて、適切な画像をすべてのユーザーに配信できるようにする Picturefill などの中間プラグインを使用できます。

http://scottjehl.github.io/picturefill/

使用法：

<picture>
	<!--[if IE 9]><video style="display: none;"><![endif]-->
	<source srcset="http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=800x800&sensor=TRUE_OR_FALSE, http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=500x500&scale=2&sensor=TRUE_OR_FALSE 2x" media="(min-width: 800px)">
	<source srcset="http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=300x300&sensor=TRUE_OR_FALSE, http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=300x300&scale=2&sensor=TRUE_OR_FALSE 2x">
	<!--[if IE 9]></video><![endif]-->
	<img style="width:100%" srcset="http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=800x300&sensor=TRUE_OR_FALSE, http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=300x300&scale=2&sensor=TRUE_OR_FALSE 2x" alt="Google Map">
</picture>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/picturefill/2.0.0/picturefill.min.js" async></script>

于 2017-03-23T03:46:55.940 に答える
0

この質問はかなり古いことは知っていますが、中央に配置された単一のマーカーマップを簡単に表示するための別の提案があります。幅 1280 までのマップで &scale=2 を使用すると、おそらく最適です。

.your-static-map-container
    {
        width: 100%;
        height: 250px; /* or whatever the height of your map is */
    }
.your-static-map-container img
    {
        object-fit: cover;
        width: 100%;
        height: 100%; /* adjust with media queries for specific height */
    }
于 2020-02-20T19:33:57.577 に答える