Карты Google - Zoom to Matd Markers не работает, когда карта не видно
-
23-09-2019 - |
Вопрос
Я использую Google Maps API V2. Я добавляю маркеры на карту, а затем увеличивает, чтобы соответствовать этим маркерам. Это работает нормально, если карта виден, я делаю это. Но если нет - например, если у меня есть TabStrip, и вкладка «Карта» не выбрана при загрузке страницы - тогда, когда я показываю карту, уровень увеличения и центр увеличения и центр ошибочны.
Вот простой тестовый пример (использует jQuery):
<script type="text/javascript">
var scale = Math.random() * 20;
$(document).ready(function() {
var $container = $('#container');
// $container.hide();
var map = new GMap2($('#map')[0]);
$container.show();
var markerBounds = new GLatLngBounds();
for (var i = 0; i < 10; i++) {
var randomPoint = new GLatLng(38.935394 + (Math.random() - 0.5) * scale, -77.061382 + (Math.random() - 0.5) * scale);
map.addOverlay(new GMarker(randomPoint));
markerBounds.extend(randomPoint);
}
map.setCenter(markerBounds.getCenter(), map.getBoundsZoomLevel(markerBounds));
});
</script>
<div id="container">
<div id="map" style="margin: 100px; width: 450px; height: 300px;"></div>
</div>
Это работает нормально, как есть, но если вы не покинули $container.hide()
Все это удалось.
Есть ли способ заставить API Google Maps правильно работать над Div, который не виден?
Решение
Все, что вам нужно сделать, это создать GMaps2()
перед чем -либо еще. Тогда вы можете hide()
контейнер, добавьте очки, получите getBoundsZoomLevel()
, show()
Это снова, и это должно работать нормально.
Попробуйте следующее:
$(document).ready(function() {
var $container = $('#container');
// First create the Map.
var map = new GMap2($('#map')[0]);
// The container can be hidden immediately afterwards.
$container.hide();
// Now you can do whatever you like!
var markerBounds = new GLatLngBounds();
for (var i = 0; i < 10; i++) {
var randomPoint = new GLatLng( 38.935394 + (Math.random() - 0.5) * scale,
-77.061382 + (Math.random() - 0.5) * scale);
map.addOverlay(new GMarker(randomPoint));
markerBounds.extend(randomPoint);
}
map.setCenter(markerBounds.getCenter(), map.getBoundsZoomLevel(markerBounds));
// Finally unhide the container.
$container.show();
});
Другие советы
Вот что я закончил делать, для того, что это стоит.
$(".TabPanel").watch("display,visibility", function() {
$(".MapContainer", this).each(function() {
if ($(this).is(":visible") == true) {
$(this).zoomToFitMarkers();
};
});
});
Это использует Плагин мониторинга Рика Страла для jQuery Чтобы просмотреть панель TAB для изменений видимости, а затем повторно поместить логику Zoom.
Для полноты вот мой zoomToFitMarkers
расширение:
$.fn.zoomToFitMarkers = function() {
var map = this[0];
map.gmap.checkResize();
map.bounds = new GLatLngBounds();
if (!!map.gmap.getOverlays) {
for (i = 0; i < map.gmap.getOverlays.length; i++) {
map.bounds.extend(map.gmap.getOverlays[i].getLatLng());
}
if (map.bounds && !map.bounds.isEmpty()) {
var zoomLevel = map.gmap.getBoundsZoomLevel(map.bounds);
zoomLevel = zoomLevel > 9 ? 9 : zoomLevel;
zoomLevel = zoomLevel < 2 ? 2 : zoomLevel;
map.gmap.setCenter(map.bounds.getCenter(), zoomLevel);
}
}
map.gmap.checkResize();
};
Это опирается на пару конвенций:
Объект GMAP2 хранится в
map.gmap
, кудаmap
целевой элемент DOM:var map= $("div#MapTarget")[0]; map.gmap = new google.maps.Map2(map);
Каждый раз, когда маркер добавляется к карте, он хранится в массиве для будущего использования:
var marker = new GMarker(point); map.gmap.addOverlay(marker); // Keep track of new marker in getOverlays array if (!map.gmap.getOverlays) map.gmap.getOverlays = new Array(); map.gmap.getOverlays.push(marker);