Google Maps-缩放标记不可见时不起作用
-
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()
一切都被淘汰了。
有没有办法让Google Maps API在不可见的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();
};
});
});
这使用 里克·斯特拉(Rick Strahl)的监控插件 观看标签面板以进行可见性更改,然后重新涂抹缩放逻辑。
为了完整,这是我的 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);
不隶属于 StackOverflow