Блог

Главная - Вопросы по программированию - серый цвет на картах Google на заднем плане, взаимодействие с картой через прямоугольную область

серый цвет на картах Google на заднем плане, взаимодействие с картой через прямоугольную область

#css #google-maps

#css #google-карты

Вопрос:

У меня есть полноэкранная веб-страница Google Maps, похожая на этуhttp://wadehammes.com/dewey-beach /, теперь, как я могу выделить серым цветом всю область (карту), за исключением прямоугольного div-контейнера?

Я хочу создать классный эффект просмотра карты «через окно», где «окно» представляет собой div-прямоугольник, а также иметь возможность взаимодействовать с картой только в области внутри прямоугольника (div-контейнер).

Я полагаю, что CSS должен это делать, я не прав? Есть идеи, как это сделать?

Надеюсь, я хорошо выразился, спасибо

Комментарии:

1. Похоже, что одним из способов было бы выделить фоновую карту серым цветом, а затем наложить другую карту размером с окно, которое регистрируется в том же месте, что и фон, без «серого цвета» на верхней карте.

2. Я думал об этом, но производительность может быть недостатком, особенно потому, что обе карты должны быть синхронизированы, чтобы отразить взаимодействие на обеих картах следующим образом: maps.forum.nu/gm_maps_in_sync.html

3. Ну, вы могли бы создать наложение DIVS или наложенное изображение с прозрачным блоком, а затем использовать Javascript для переноса щелчков мыши под ним.

4. Пример использования DIVs: jsfiddle.net/Pxvfu/1 (Протестировано в Chrome и FF 7.) Обратите внимание, что это всего лишь демонстрация; например, высота не равна 100%. Но вы поняли идею.

5. @lito на самом деле речь идет не о производительности, а о событиях Google Map. У нас есть bounds_change, но нет события «mousemove», так что это лучшее поведение, которого вы могли бы достичь. В любом случае, смотрите мой ответ, кажется довольно солидным.

Ответ №1:

Идея в том, что вам понадобятся две карты, потому что Google не позволяет применять стиль к «только части» карты. Таким образом, у вас будет две версии: черно-белая и цветная карта. Затем с помощью CSS вы меняете положение одного внутри другого, а с помощью JS вы добавляете поддержку перетаскивания пользователя. Если вам нужно добавить дополнительные элементы, такие как маркеры или действия по щелчку, просто не забудьте привязать эти события к обеим созданным картам: map amp; 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 = bamp;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 amp;amp; map2.setCenter(this.getCenter());
  });

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