我有一个类似于此的全屏谷歌地图网页 http://wadehammes.com/dewey-beach/ ，现在除了矩形 div 容器之外，我如何将整个区域( map )变灰？
我想创建“通过窗口”查看 map 的酷炫效果，其中“窗口”是一个 div 矩形，并且还能够仅在矩形内的区域(div-容器)。
我想 CSS 应该这样做，我错了吗？知道怎么做吗？
我希望我自己表达得很好 谢谢
最佳答案
想法是您将需要两张 map ，因为 Google 不允许您将样式应用于 map 的“仅一部分”。所以你会有两个版本:黑白和彩色贴图。然后使用 CSS 将一个位置插入另一个，使用 JS 添加对用户拖动的支持。如果您需要添加额外的东西，例如标记或点击操作，请记住将这些事件绑定(bind)到两个创建的 map :map 和 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>
关于css - 灰色背景上的谷歌地图，通过矩形区域进行 map 交互，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8016042/