css - 灰色背景上的谷歌地图，通过矩形区域进行 map 交互-6ren

css - 灰色背景上的谷歌地图，通过矩形区域进行 map 交互

转载作者：行者123 更新时间：2023-11-28 12:24:42

我有一个类似于此的全屏谷歌地图网页 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>