我想弄清楚如何將我的控件定位到頁面中心。但是當我使用「BOTTOM_CENTER」時,它將div的左端居中到地圖的中心。我想抵消這個,這樣div的中心位於地圖的底部中心。我搜索了幾個小時,並沒有找到任何有關這樣做的信息..谷歌地圖自定義控件定位
有沒有人有一個想法如何做到這一點或可以指向我的資源,可以解釋它好一點?
謝謝!
下面是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>
謝謝!一整天都在盯着這個,而現在你的解釋讓我明白我以前看不到!我會更多地處理它,這樣盒子的大小就是靜態的,而且在平移時也不會顯示。它以現在的方式服務於它的目的,就像修補它直到它的完美一樣.. :)再次感謝! – Dennis 2011-01-26 05:01:11