jquery - 谷歌地图->如何在用户单击按钮后使地图变暗并完全禁用它

Question

因此，我之前创建了许多地图应用程序，但我目前正在开发的应用程序实际上与它有一些交互。

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

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

我现在想要发生的是，我希望地图变暗，就像透明的黑色一样，让它看起来不再起作用并一起禁用地图。

如果您曾经使用过fancybox，它会类似于fancybox 拉起时的背景屏幕。

任何关于此的想法或想法将不胜感激我一直在寻找，但实际上还没有找到任何方法来做到这一点。

Answer 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