扩展Google地图边界，以便div覆盖不包含任何标记 [英] Extend Google Maps Bounds so that div overlay doesn't cover any markers
问题描述
在我正在处理的Google地图混搭中，地图宽100％，几乎100％高，我有一个水平透明的div，它使用z-index和CSS覆盖地图的左侧。
当我动态添加我的标记时，我从一个空的Bounds对象开始，并逐个扩展它以包含新的LatLng。有时候，标记会出现在包含其他元素的透明div下面。
假设透明div的宽度为250像素。
我想要做的是一旦我的边界显示所有的标记已经建立，我想再扩展它们来扩展Google Map的视口，以便当我符合边界时，这些边界标记现在至少距离左边界250像素，因此它们不被透明div覆盖。
我试着玩 MapProjection。 fromPointToLatLng 和 MapCanvasProjection.fromDivPointToLatLng ，但无法获得可预测的结果。
任何建议或例子，将不胜感激。
希望这个快速和肮脏的解决方案将有所帮助（这是API V3）
< html>
< head>
< style>
#over {
position：absolute;
z-index：99999;
width：250px;
height：600px;
不透明度：0.7;
top：0px;
border：2px纯黑色;
left：0px;
背景：白色;
}
< / style>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>
< title> Google地图边界< / title>
< script src =http://code.jquery.com/jquery-1.4.4.js>< / script>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script>
< script type =text / javascript>
var map;
var bounds;
var overlay;
//覆盖层的智慧（可能应该动态获取）
var overlayWidth = 250;
函数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）;
$ b}
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如果（point.x< overlayWidth）{
//计算要延伸的偏移量，则覆盖
offset = new google.maps.Point（（point.x-overlayWidth），0）;
extendByX = overlay.getProjection（）。fromContainerPixelToLatLng（offset）;
//这里您可能想要检查所有现有的标记是否会在应用新的边界之前进入新的边界
newBounds = new google.maps.LatLngBounds（extendByX，bounds.getNorthEast（））;
map.fitBounds（newBounds）;
}
}
< / script>
< / head>
< body onload =initialize（）>
< div id =over> OVERLAY< / div>
< div id =map_canvasstyle =width：900px; height：600px;>< / div>
< input type =buttonvalue =添加标记和扩展边界onclick =addMarker（）>
< / body>
< / html>
In a Google Maps mashup I'm working on, the map is 100% wide and pretty much 100% tall and I have a horizontal transparent div that overlays the left side of the map using z-index and CSS.
When I dynamically add my markers, I start with an empty Bounds object and extend it one by one to contain the new LatLngs. Sometimes however the markers appear under my transparent div that contains other elements.
Let's say my transparent div is 250 pixels wide.
What I'd like to do is once my bounds that show all the markers are established, I'd like to extend them one more time to expand the viewport of the Google Map so that when I fit the bounds, these markers now appear at least 250 pixels away from the left border so that they are not covered by the transparent div.
I tried playing with MapProjection.fromPointToLatLng and MapCanvasProjection.fromDivPointToLatLng but wasn't able to achieve predictable results.
Any advice or examples would be appreciated.
Hopefully this quick and dirty solution will help (it is 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>
这篇关于扩展Google地图边界，以便div覆盖不包含任何标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
