Google Maps API 3 fitBounds填充 - 确保标记不被覆盖控件遮挡 [英] Google Maps API 3 fitBounds padding - ensure markers are not obscured by overlaid controls
问题描述
我希望在调用
我试过添加一个控件如自定义控件所记录，但地图并不完全知道它 - 请参阅这个小提琴，映射自定义控件示例。其中一个标记仍然被控制遮挡。
这是一种黑客解决方案， fitBounds ，你可以放大一个等级，所以你可以为你的标记获得足够的填充。
假设 map 变量是您对地图对象的引用;
map.setZoom（map。 getZoom（） - 1）;
I'd like to be able add padding to a map view after calling a map.fitBounds(), so all markers can be visible regardless of map controls or things like sliding panels that would cover markers when opened. Leaftlet has an option to add padding to fitBounds, but Google Maps does not.
Sometimes the northmost markers partially hide above the viewport. The westmost markers also often lay under the zoom slider. With API 2 it was possible to form a virtual viewport by reducing given paddings from the map viewport and then call the method showBounds() to calculate and perform zooming and centering based on that virtual viewport:
map.showBounds(bounds, {top:30,right:10,left:50});
A working example of this for API 2 can be found here under the showBounds() example link.
I cannot find similar functionality in API V3, but hopefully there is another way this can be accomplished. Maybe I could grab the northeast and southwest points, then add fake coordinates to extend the bounds further after including them?
UPDATE
(Codepen in case the code below doesn't work)
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
draggable: true,
streetViewControl: false,
zoomControl: false
});
var marker1 = new google.maps.Marker({
position: {lat: 37, lng: -121},
map: map,
});
var marker2 = new google.maps.Marker({
position: {lat: 39.3, lng: -122},
map: map,
});
var bounds = new google.maps.LatLngBounds();
bounds.extend(marker1.position);
bounds.extend(marker2.position);
map.fitBounds(bounds);
}
#map {
height: 640px;
width: 360px;
}
#overlays {
position: absolute;
height: 50px;
width: 340px;
background: white;
margin: -80px 10px;
text-align: center;
line-height: 50px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
</head>
<body>
<div id="map"></div>
<div id="overlays">Controls / Order pizza / ETA / etc.</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?&callback=initMap">
</script>
</body>
</html>
The problem is this:
I've tried adding a control as documented at Custom controls, but the map isn't exactly aware of it - see this fiddle forked from the Maps custom control example. One of the markers is still obscured by the control.
This is some kind of a hack-ish solution, but after the fitBounds, you could zoom one level out, so you get enough padding for your markers.
Assume map variable is your reference to the map object;
map.setZoom(map.getZoom() - 1);
这篇关于Google Maps API 3 fitBounds填充 - 确保标记不被覆盖控件遮挡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
