Идея состоит в том, что вам понадобятся две карты, потому что Google не позволяет вам применять стиль к «только части» карты.Таким образом, у вас будет две версии: черно-белая и цветная карта.Затем с помощью CSS вы взламываете положение один внутри другого, а с помощью JS вы добавляете поддержку перетаскивания пользователя.Если вам нужно добавить дополнительные вещи, например маркеры, или щелкнуть действиями, просто не забудьте привязать эти события к обеим созданным картам: map & other.Посмотрите созданную мной демонстрацию .
Я создал эту небольшую демонстрацию за 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>