重新计算信息框位置的最佳方法是什么，它总是试图在 map 内完全绘制但不移动 map 。
因此，如果我尝试打开一个靠近窗口右边缘的信息框，它应该将信息框绘制到标记的左侧，而不是在标记的顶部，或者在标记的左侧。
是否有相应的框架？
谢谢!
每个请求的我的信息框选项。
var myOptions = {
content: this.bigInfo(variables)
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(20, -60)
,zIndex: 9
,boxClass: "bigInfo"
,closeBoxMargin: "-9px -9px 3px 3px"
,closeBoxURL: "./img/close.png"
,infoBoxClearance: new google.maps.Size(100,100)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
最佳答案
我有 InfoBoxes 的窍门。它依赖于我在另一个问题 fromLatLngToContainerPixel 中发现的从 LatLng 到屏幕像素的转换。谷歌文档描述告诉像素位置是在“ map 的外部容器”中测量的。但是，回答者警告说它的兄弟函数 fromLatLngToDivPixel。不可靠，因为它会随着调整大小或缩放而卡住。
因此，我的代码使用了 fromLatLngToContainerPixel。如果您尝试使用我的代码，请尝试使用您的代码并查看是否需要更改偏移量。在我的代码中，我有一个 86 像素的固定信息框宽度。
单击中心，然后单击可见区域的边缘。 map 不会移动。
这是 JSFiddle:http://jsfiddle.net/eHT9U/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100% }
#map_canvas { width: 100%; height: 300px }
#container { padding: 10px; }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="infobox_alt.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var map;
var mapOptions = {
center: new google.maps.LatLng(40.0, -88.0),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var count = 0;
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
google.maps.event.addListener(map, 'click', function (event) {
count += 1;
pt = overlay.getProjection().fromLatLngToContainerPixel(event.latLng);
document.getElementById("end").value = pt;
addMarker(event.latLng, "index #" + Math.pow(100, count), pt.x, pt.y);
});
}
function addMarker(pos, content, x, y) {
var marker = new google.maps.Marker({
map: map,
position: pos
});
marker.setTitle(content);
var labelText = content;
var myOptions = {
content: labelText
,boxStyle: {
border: "1px solid black"
,background: "white"
,textAlign: "center"
,fontSize: "8pt"
,width: "86px" // has to be set manually
,opacity: 1.0
,zIndex: -100
}
,disableAutoPan: true
,position: marker.getPosition()
,closeBoxURL: ""
,pane: "floatPane"
,enableEventPropagation: true
,zIndex:-1
};
offX = -43;
offY = 0;
//compare boundaries
if(x > $("#map_canvas").width() - 60) {
offX = -86;
}
if(x < 60) {
offX = 0;
}
if(y > $("#map_canvas").height() - 60) {
offY = -50;
}
myOptions.pixelOffset = new google.maps.Size(offX,offY);
var ibLabel = new InfoBox(myOptions);
ibLabel.setZIndex(-1);
ibLabel.open(map);
var infowindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker, 'click', function (event) {
infowindow.open(map, this);
ibLabel.setZIndex(-1);
this.setZIndex(1);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
end: <input id="end" size="30">
<div id="container">
<div id="map_canvas"></div>
</div>
</body>
</html>
关于javascript - 信息框上的边界检测，因此它们不会从 map 上消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10553007/