Question

我有一个类似于http://wadehammes.com/dewey-beach/的全屏谷歌地图网页，现在除了一个矩形的div容器外，我怎样才能使整个区域（地图）变灰？

我想创建一个很酷的效果，通过“窗口”查看地图，其中“窗口”是一个div矩形，并且还能够仅在矩形内的区域与地图交互（div-容器）。

我想CSS应该这样做，我错了吗？知道怎么做吗？

我希望自己表达得很好感谢

Answer 1

您的想法是需要两张地图，因为Google不允许您将样式应用于地图的“仅一部分”。所以你有两个版本：black＆amp;白色和彩色地图。然后用CSS攻击一个在另一个里面的位置，用JS添加对用户拖动的支持。如果您需要添加额外的内容，例如标记或点击操作，请记住将这些事件绑定到两个创建的地图：map＆amp; other。查看demo I've created。

我在10分钟内创建了这个小小的演示，只需复制粘贴就可以了。代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Map Loop</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
#map-container{
    height:400px; /* map height */
    position:relative;
    width:500px; /* map width */
}
#map-canvas{
    height:400px; /* map height */
    position:absolute;top:0;left:0;
    width:500px; /* map width */
}
.loop{
    height:200px;
    overflow:hidden;
    position:absolute;top:100px;left:150px; /* offset in map view */
    width:200px;
}
#map-canvas2{
    height:400px; /* map height */
    margin:-100px 0 0 -150px; /* opposite to top and left in .loop */
    width:500px; /* map width */
}
</style>
</head>
<body>

<div id="map-container">
    <div id="map-canvas"></div>
    <div class="loop">
        <div id="map-canvas2"></div>
    </div>
</div>

<script type="text/javascript">
function initialize() {
  // 2 = color
  // 1 = b&w
  var mapDiv = $('#map-canvas2')[0];
  var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(37.4419, -122.1419),
    zoom: 13,
    disableDefaultUI: true, /* we dont need UI in the loop */
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var other = $('#map-canvas')[0];

  var map2 = new google.maps.Map(other, {
    center: new google.maps.LatLng(37.4419, -122.1419),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [{
      stylers: [{ saturation: -100 }]
    }]
  });

  // flag to prevent buggy behavior
  var BLACK_WHITE_MAP = false;
  google.maps.event.addListener(map, 'mousedown', function() {
    BLACK_WHITE_MAP = false;
  });
  google.maps.event.addListener(map2, 'mousedown', function() {
    BLACK_WHITE_MAP = true;
  });
  google.maps.event.addListener(map, 'bounds_changed', function() {
    !BLACK_WHITE_MAP && map2.setCenter(this.getCenter());
  });

  google.maps.event.addListener(map2, 'bounds_changed', function() {
    BLACK_WHITE_MAP && map.setCenter(this.getCenter());
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>

灰色下来谷歌地图背景，地图互动通过矩形区域

1 个答案: