Расширьте границы Карт Google, чтобы наложение div не перекрывало маркеры - PullRequest
Новая
       12

Расширьте границы Карт Google, чтобы наложение div не перекрывало маркеры

2 голосов
/ 26 января 2011

В мэшапе Google Maps, над которым я работаю, карта имеет ширину 100% и почти 100% высоты, и у меня есть горизонтальный прозрачный div, который перекрывает левую сторону карты с использованием z-index и CSS. *

Когда я динамически добавляю свои маркеры, я начинаю с пустого объекта Bounds и расширяю его один за другим, чтобы содержать новые LatLngs. Однако иногда под моим прозрачным тегом появляются маркеры, содержащие другие элементы.

Допустим, мой прозрачный div имеет ширину 250 пикселей.

Что я хотел бы сделать, это когда мои границы, которые показывают все маркеры, установлены, я хотел бы расширить их еще раз, чтобы расширить область просмотра карты Google, чтобы при подгонке границ эти маркеры теперь отображаются на расстоянии не менее 250 пикселей от левой границы, чтобы они не были покрыты прозрачным элементом div.

Я пытался играть с MapProjection.fromPointToLatLng и MapCanvasProjection.fromDivPointToLatLng, но не смог достичь предсказуемых результатов.

Буду признателен за любые советы или примеры.

1 Ответ

1 голос
/ 31 января 2011

Надеюсь, это быстрое и грязное решение поможет (это API v3) 

<html> 
<head> 
<style>
#over {
position: absolute;
z-index:99999;
width: 250px;
height: 600px;
opacity: 0.7;
top: 0px;
border: 2px solid black;
left: 0px;
background: white;
}
</style>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps Bounds</title> 
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
var map;
var bounds;
var  overlay;
//the witdh of your overlay (probably should get it dynamically
var overlayWidth = 250;

function initialize() {
  var chicago = new google.maps.LatLng(41.875696,-87.624207);
  var myOptions = {
    zoom: 11,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
         overlay = new google.maps.OverlayView();

    overlay.draw = function() {};

    overlay.setMap(map);


}
function addMarker() {

maywood = new google.maps.LatLng(41.8823,-87.8487);
 var marker = new google.maps.Marker({
      position: maywood, 
      map: map
  }); 
bounds = map.getBounds();

point = overlay.getProjection().fromLatLngToContainerPixel(maywood);
//point is under overlay
if (point.x<overlayWidth) {
//calculate offset by which to extend 
offset = new google.maps.Point((point.x-overlayWidth),0);
extendByX = overlay.getProjection().fromContainerPixelToLatLng(offset);
//here you might want to check if all your existing markers will fit into new bounds before applying the new bounds
newBounds = new google.maps.LatLngBounds(extendByX,bounds.getNorthEast());
map.fitBounds(newBounds);
}


}

</script> 
</head> 
<body onload="initialize()"> 
<div id="over">OVERLAY</div>
  <div id="map_canvas" style="width: 900px;height: 600px;"></div> 
<input type="button" value="Add Marker & Expand Bounds" onclick="addMarker()">
</body> 
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...