灰色下來谷歌地圖的背景，地圖通矩形區域

我有類似這樣http://wadehammes.com/dewey-beach/全屏谷歌地圖網頁交互，現在我怎麼能灰色關閉整個區域（圖）除了一個矩形的div容器？灰色下來谷歌地圖的背景，地圖通矩形區域

我想創建一個很酷的效果，通過一個窗口來查看地圖，其中「窗口」是一個div矩形，並且還能夠僅與矩形內的區域（div -容器）。

我想CSS應該這樣做，我錯了嗎？任何想法如何做到這一點？

我希望表達自己好感謝

來源

2011-11-04 lito

這似乎是一個辦法是灰色出來的背景圖，然後覆蓋另一種映射，寄存器的確切位置相同背景的窗口的大小，在沒有「老齡化」上圖。 –

我想過這個問題，但性能是一個缺點，因爲特殊的地圖都需要以被同步反映這樣既地圖的互動：http://maps.forum.nu/gm_maps_in_sync.html – lito

嗯，你可以創建覆蓋DIV或帶有透明塊的覆蓋圖像，然後使用Javascript傳輸下面的鼠標點擊。 –

的想法是，你將需要兩個地圖，因爲谷歌不會讓您應用樣式的地圖「只是一個部分」。所以你會有兩個版本：黑色&白色和彩色地圖。然後用CSS你可以在另一個內部找到位置，而用JS你可以添加對用戶拖動的支持。如果您需要添加標記或其他操作，請記住將這些事件綁定到兩個已創建的地圖上：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>

來源

2011-12-26 04:07:00

灰色下來谷歌地圖的背景，地圖通矩形區域

回答

相關問題