信息框中的边界检测，所以他们不会从地图上划掉 [英] Border dectection on Infoboxes, so they don't get draw off the map
问题描述
重新计算信息框位置的最好方法是，它总是试图在地图内完整绘制，但不移动地图。所以如果我试图打开一个靠近窗口右边缘的信息框，它应该将信息框绘制在标记的左侧，而不是顶部或左侧。
我的信息框选项是每个请求的
p> 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
，窗格：fl oatPane
，enableEventPropagation：false
};
我对InfoBoxes有一个破解。它依赖于从LatLng转换为我在不同问题中找到的像素的屏幕转换，来自 所以，我的代码使用了。 Google文档描述告诉像素位置是在地图的外部容器中测量的。但是，回答者警告说，它的兄弟功能。是不可靠的，因为它与调整大小或缩放冻结。 。如果您尝试使用我的代码，请在您的代码中查看是否需要更改偏移量。在我的代码中，我有一个固定的InfoBox宽度为86px。
点击中心，然后点击可见区域的边缘。地图不会移动。
这里是JSFiddle： http://jsfiddle.net/eHT9U /
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< style type =text / css>
html，body {margin：0;填充：0; height：100％}
#map_canvas {width：100％; height：300px}
#container {padding：10px; }
< / style>
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js?sensor=false>< / script>
< script type =text / javascriptsrc =infobox_alt.js>< / script>
< script type =text / javascriptsrc =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;
函数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）{$ b $ 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）;
}）;
函数addMarker（pos，content，x，y）{
var marker = new google.maps.Marker（{
map：map，
职位：pos
}）;
marker.setTitle（content）;
var labelText = content;
var myOptions = {
content：labelText
，boxStyle：{
border：1px纯黑
，background：white
，textAlign：center
，fontSize：8pt
，width：86px//必须手动设置
，opacity：1.0
，zIndex： -100
}
，disableAutoPan：true
，position：marker.getPosition（）
，closeBoxURL：
，窗格：floatPane
，enableEventPropagation：true
，zIndex：-1
};
offX = -43;
offY = 0;
//比较边界
if（x> $（＃map_canvas）.width（） - 60）{
offX = -86;
}
if（x <60）{
offX = 0; （$> $（＃map_canvas）。height（） - 60）{
offY = -50;
}
if（y>
}
myOptions.pixelOffset = new google.maps.Size（offX，offY）;
var ibLabel =新的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>
结束：< input id =endsize =30>
< div id =container>
< div id =map_canvas>< / div>
< / div>
< / body>
< / html>
What's the best way to recalculate the position of the infobox in a way it's always trying to be full draw inside the map but without moving the map.
So if I try to open an infobox that is close to the right edge of the window it should draw the infobox to the left of the marker not on top of it, or to it's left.
is there a framework for that ?
Thanks !
My infobox options per request.
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
};
I have a hack for InfoBoxes. It relies on a conversion from LatLng to screen pixels I found in a different question, fromLatLngToContainerPixel. The Google documentation description tells the pixel position is measured in the "map's outer container". However, the answerer warned that its sibling function, fromLatLngToDivPixel. is unreliable because it freezes with a resize or zoom.
So, my code uses fromLatLngToContainerPixel. If you try using my code, play around in your code and see if the offsets need to be changed. In my code I have a fixed InfoBox width of 86px.
Click in the center, and then the edges of the visible area. The map will not move.
Here's the 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>
这篇关于信息框中的边界检测，所以他们不会从地图上划掉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
