0

この質問に関連するものと同様のことをしようとしています。これは、ページ全体を埋める背景として Google マップを使用し、その上にいくつかのコンテンツを配置することです。しかし、違いは、このコンテンツには 2 列のレイアウトがあり、レスポンシブにしたいので、中央に配置するのに苦労しています。

問題は、マップが機能する必要があることです。そのため、できるだけ多くのスペースを確保したいと考えています。2 つの列の下のマップが機能しないことはわかっていますが、残りは機能したいと考えています。

ラッパーを使用して 2 つの列を中央に配置すると、ラッパーがマップの上に配置され、このマップ エリアは使用できなくなります (ドラッグ、クリックなどはできません)。

では、両方の列を中央に配置するにはどうすればよいでしょうか? 私はかなり初心者ですが、必要に応じていくつかのJSを受け入れています。

編集：視覚化を支援するためにスーパースケッチを作成しました...ラッパー（透明な紫色のレイヤー）を使用して中央に配置する方法を確認できます（残りのページで行っているように） 、マーカーがあるマップの中央部分をカバーします。

4

1 に答える 1

0

コンテンツが上にある完全に機能するマップを作成する方法がわかりません。コンテンツを表示するには、z-index を大きくする必要があります。これにより、マップ内の要素が隠れてしまいます。「map-canvas」をボディとして設定し、コンテンツを含む div をマップの周囲の領域に配置しますが、POI またはマップ コントロール ツールからは離し、コンテンツ div の背景色に RGBA カラーを使用します (おそらく 50% の不透明度)、そのコンテンツの下にあるものは、上部に div があるため、訪問者の手の届かないところにあります。

ただし、このようなものから始める必要があります...：

<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
       <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

    <script type='text/javascript'>
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(35.248669, -80.804619),
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

 var markers = [];

markers[0] = new google.maps.Marker({
       icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|00E64D|000000',
       position: new google.maps.LatLng(35.247334, -80.805382),
    map: map
});

markers[1] = new google.maps.Marker({
       icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=B|FF0000|000000',
       position: new google.maps.LatLng(35.247551, -80.804008),
    map: map
});


for ( i = 0; i < markers.length; i++ ) {
    google.maps.event.addListener(markers[i], 'click', function() {
      window.location.href = this.url;  //changed from markers[i] to this[i]
    });
}
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
  <style type="text/css">
html, body {
    height: 100%;
    width: 100%;
}
.wrapper {
    width: 100%;
    height: 100%;
    z-index: 1;
    position: relative; 
}
.content-wrapper {
    position: relative;
    width: 960px;
    margin: 0px auto;
}
#content1 {
    position: absolute;
    width: 250px;
    height: 150px;
    color: #fff;
    text-shadow: 0px 1px #000;
    box-sizing: border-box;
    padding: 10px;
    background: rgba(0, 153, 153, 0.5);
    border: 2px solid #222;
    border-radius: 15px;
    top: 100px;
    left: 50%;
    margin-left: 100px;
    z-index: 999;
}
#content2 {
    position: absolute;
    width: 250px;
    height: 150px;
    color: #fff;
    text-shadow: 0px 1px #000;
    box-sizing: border-box;
    padding: 10px;
    background: rgba(153, 110, 0, 0.41);
    border: 2px solid #222;
    border-radius: 15px;
    top: 400px;
    left: 50%;
    margin-left: -350px;
    z-index: 999;
}
  </style>
  </head>
  <body>
  <div class="wrapper">
    <div id="map-canvas" style="width: 100%; height: 100%; margin: 0px auto; position: relative; z-index: -1;">
    </div>
    <div id="content1">blah blah</div>
    <div id="content2">Fuu</div>

    </div>
  </body>
</html>

したがって、2 つの列を取得するには、#content1 と #content2 の高さを 100% にする必要があります。問題は、マップ コントロールが側面にあるため、位置を調整する必要があることです。コントロールの位置を変更できるかどうかを確認するには、Google Maps API を参照してください。おそらく、両方の列を右側に配置し、衛星/地図ビューのコントロールをオフにして、目的の効果のデフォルトを設定します.

大都市で 45 度のビューと 5 倍程度の初期ズームを使用すると、これがいかにクールであるかがわかります。

絶対位置を説明するために編集：

伝統的に、Web ページには包含 div (通常は .wrapper または .container) があり、すべての要素はその中に入ります。実際、この例にはちょうどそのようなコンテナー .wrapper があります。ただし、マップをオーバーレイするコンテンツのラッパーを実装しようとすると、透明であっても、すべてのマップ要素がオーバーレイされ、ユーザーがマップの機能を使用できなくなります。したがって、絶対配置を使用する必要があります。絶対配置は、「相対」の位置を持つ最も近い包含要素 (この場合は .wrapper) に対して「絶対」です。

絶対配置ではユーザーの画面解像度に基づいて要素 (#content1、#content2) が配置されるため、ピクセルなどの厳密な配置定義を使用すると、結果に一貫性がなくなります。

#content2 {
    position: absolute;
    width: 250px;
    height: 150px;
    top: 100px;
    left: 100px;
    z-index: 999;
}

上記のコードは、画面解像度に関係なく、要素 #content2 を左から 100 ピクセル移動します。実際、これは左側のサイドバーの正しいアプローチである可能性があり、ユーザーが地図をズームできるように Google マップのナビゲーション ツールをクリアします。

ただし、画面の解像度に関係なく、コンテンツ要素を中央に配置したい場合があります。これを達成するには、left:50%; を設定します。余白で調整します。left:50% を設定すると、解像度に関係なく、要素の左端の部分が画面の中央に配置されます。要素の幅が 250px であるため、margin-left: -125px; を設定します。要素をその全幅の左 50% に戻し、要素を中央に配置します。幅が 300px の場合、margin-left: -150px などを中央揃えに設定します。あなたの図面に基づいて、コンテンツ領域を約 650px にし、中央ではなく右側に配置したいので、コンテンツ div には次のコードを使用できます。

#content1 {
    position: absolute;
    width: 650px;
    height: 150px;
    color: #fff;
    text-shadow: 0px 1px #000;
    box-sizing: border-box;
    padding: 10px;
    background: rgba(0, 153, 153, 0.5);
    border: 2px solid #222;
    border-radius: 15px;
    top: 100px;
    left: 50%;
    margin-left: 180px;
    z-index: 999;
}

iPad をカバーするために、ほとんどのページの幅が最小 960 ピクセルになるように設計しています。#content1 が視野に収まるようにするには、要素の左端が中央にあるため、960 ピクセルの画面幅を計算し、それを 2 (480 ピクセル) で割る必要があります。要素は 650 ピクセルであるため、右に大きくなりすぎます (170 ピクセル)。したがって、コンテンツ div #content1 を、ワイド スクリーン モニター (1920 ピクセル) ではページの中央付近に配置し、iPad などの小さなモニターでは完全に表示されるようにするには、margin-left を設定する必要があります。 180ピクセル。これにより、iPad で表示したときに、要素の右側に快適な 10 ピクセルのマージンが与えられます。

もう 1 つ重要な注意事項があります。box-sizing: border-box; を使用しました。財産。このプロパティにより、幅 (ここでは 650px) に指定したものが、パディングと境界線を含む要素の合計幅になります。ボーダー ボックスを使用しないと、#content1 div の幅は 684 ピクセルになります。(幅: 650 ピクセル、パディングは左 10 ピクセル、右 10 ピクセル、ボーダーは左 2 ピクセル、右 2 ピクセル)。box-sizing: border-box を使用すると、計算が簡単になります。

私の回答が役に立ったと思われる場合は、私の回答を正しいものとして選択して、質問に回答済みとしてマークしてください。

于 2013-10-01T18:12:11.110 に答える