我试图弄清楚如何将我的控件定位到页面的中心。但是当我使用“BOTTOM_CENTER”时，它将div的左端居中到 map 的中心。我想抵消这一点，使 div 的中心位于 map 的底部中心。我已经搜索了几个小时，但没有找到任何关于这样做的信息..
有谁知道如何做到这一点，或者可以向我指出一个可以更好地解释它的资源？
谢谢!
以下是Converting LatLng/Pixel Coordinate Control的修改版
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>LatLng Coordinates Control</title>
<style type="text/css">
#map {
width: 800px;
height: 600px;
}
#latlng-control {
background: #ffc;
border: 1px solid #676767;
font-family: arial, helvetica, sans-serif;
font-size: 0.7em;
padding: 2px 4px;
position: absolute;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function degToDms(dec) {
var deg = Math.floor(Math.abs(dec));
var min = Math.floor((Math.abs(dec)-deg)*60);
var sec = (Math.round((((Math.abs(dec) - deg) - (min/60)) * 60 * 60) * 100) / 100 ) ;
var len = String(deg).length
deg = Array(3 + 1 - len).join('0') + deg;
var len = String(min).length
min = Array(2 + 1 - len).join('0') + min;
var len = String(sec).length
sec = Array(5 + 1 - len).join('0') + sec;
deg = dec < 0 ? '-' + deg : deg;
var dec_min = (min*1.0 + (sec/60.0));
var dms = deg + '° ' + dec_min.toFixed(3) + '\'';
return dms;
}
function LatLngControl(map) {
this.node_ = this.createHtmlNode_();
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(this.node_);
this.setMap(map);
this.set('visible', false);
}
LatLngControl.prototype = new google.maps.OverlayView();
LatLngControl.prototype.draw = function() {};
LatLngControl.prototype.createHtmlNode_ = function() {
var divNode = document.createElement('div');
divNode.id = 'latlng-control';
divNode.index = 100;
return divNode;
};
LatLngControl.prototype.visible_changed = function() {
this.node_.style.display = this.get('visible') ? '' : 'none';
//this.node_.style.floatRight = '100px';
};
LatLngControl.prototype.updatePosition = function(latLng) {
var dmsLat = degToDms(latLng.lat().toFixed(4));
var dmsLon = degToDms(latLng.lng().toFixed(4));
this.node_.innerHTML = 'Mouse Position: ' + dmsLat + ', ' + dmsLon;
};
function init() {
var centerLatLng = new google.maps.LatLng(37.748582,-122.418411);
var map = new google.maps.Map(document.getElementById('map'), {
'zoom': 10,
'center': centerLatLng,
'mapTypeId': google.maps.MapTypeId.ROADMAP
});
var latLngControl = new LatLngControl(map);
google.maps.event.addListener(map, 'mouseover', function(mEvent) {
latLngControl.set('visible', true);
});
google.maps.event.addListener(map, 'mouseout', function(mEvent) {
latLngControl.set('visible', false);
});
google.maps.event.addListener(map, 'mousemove', function(mEvent) {
latLngControl.updatePosition(mEvent.latLng);
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<h2>LatLng Coordinate Control</h2>
<div id="map"></div>
</body>
</html>
最佳答案
有那么一会儿，我以为您可能已经发现了 google API 中的一个错误!...但是不，唉，那太容易了 ;-)
您在这里的基本问题是，当您将 LatLngControl 的 div 粘贴到 map 上时，它的宽度为 0。所以它会转到它应该在的位置，当您将文本放入 div 时，它会从该点展开。如果您捕获 map 并用鼠标平移它，您会注意到 LatLngControl 将重新定位到您想要的方式。
如此快速修复，进行此修改:
function LatLngControl(map) {
this.node_ = this.createHtmlNode_();
var dmsLat = degToDms(map.getCenter().lat().toFixed(4));
var dmsLon = degToDms(map.getCenter().lng().toFixed(4));
this.node_.innerHTML = 'Mouse Position: ' + dmsLat + ', ' + dmsLon;
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(this.node_);
this.setMap(map);
// this.set('visible', false); <---keep it simple for now
}
如果您真的希望页面加载 latlng div 不可见，您需要多花点时间 - 最终我想的黑客是在您第一次将鼠标移到 map 上时以编程方式来回平移 map - 就像当你摇动电视 Remote 以使其正常工作时......但这就像 icky。
还有这个
position: absolute;
在你的 CSS 中可能是多余的。这也是
divNode.index = 100;
...我知道您可能正在尝试将 latlng div 定位在 google 法律简介上方，以免被遮挡。这可以做到，但您必须直接将 div 附加到页面，而不是通过 map 。
关于google-maps - 谷歌地图自定义控件定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4799821/