Question

所以，我之前创建过很多地图应用程序，但我目前正在处理的那个实际上与它有一些交互。

用户可以点击标记并接受它们，并在点击地图外部但在同一页面上的按钮后保存数据。

此时我正在显示一些关于地图外某些div中发生的事情的数据。

我现在想要的是，我希望地图变暗，就像一个透明的黑色，让它看起来不再有效，并完全禁用地图。

如果你曾经使用过fancybox，它会与fancybox拉起时的背景屏幕相似。

对此我的任何想法或想法都会非常感激，我一直在寻找，但实际上还没有找到任何办法。

Answer 1

我不妨用小提琴做个回答。

jsFiddle - ＆gt; http://jsfiddle.net/HB324/

HTML - ＆gt;

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

CSS - ＆gt;

#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 - ＆gt;

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

Google地图 - ＆gt;如何在用户单击按钮后使地图变暗并完全禁用它

1 个答案: