1

それで、私は以前に多くの地図アプリケーションを作成しました、しかし私が現在取り組んでいるものは実際にそれにいくらかの相互作用を持っています。

ユーザーはマーカーをクリックして受け入れることができ、マップの外部にある同じページのボタンをクリックするとデータが保存されます。

その時点で、マップ外のいくつかのdivで何が起こったかに関する一連のデータを表示しています。

私が今起こりたいのは、マップを透明な黒のように暗くして、機能しなくなったように見せ、マップを完全に無効にすることです。

fancyboxを使用したことがある場合は、fancyboxが表示されたときの背景画面のようになります。

これについての考えやアイデアは、私が探し回っていたが、実際にはまだこれを行う方法を見つけていないことを大いに感謝します。

4

1 に答える 1

1

私はそれをフィドルで答えたほうがいいでしょう。

jsFiddle-> http://jsfiddle.net/HB324/

HTML->

<div id="hide_map">
  <a href="#"> Click Me To Hide Map </a>
</div>
<div id="map_canvas"></div>

CSS->

#map_canvas{
 position:relative;
 height:300px;
 width:300px;    
}

.overlay{
  position:absolute;
  top:0;
  left:0;    
  width:100%;
  height:100%;
  background:rgba(0,0,0,.5);
}

JavaScript->

var geocoder;
var map;
var latlng;
jQuery(document).ready(function() {

        geocoder = new google.maps.Geocoder();
          var address = 'United States';
          geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              latlng=results[0].geometry.location;
              var myOptions = {
                zoom: 16,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.HYBRID
              }
              map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
              var marker = new google.maps.Marker({
                  map: map,
                  position: latlng,
                  title:address
              });
            }
          });
    });

編集：CSSを忘れ、CSSを追加

于 2012-06-25T20:39:59.357 に答える