Google Maps Custom Control positioning
I am trying to figure out how to position my co开发者_开发知识库ntrol to the center of the page. but when I use "BOTTOM_CENTER" it centers the left end of the div to the center of the map. I'd like to offset this so that the center of the div is in the bottom center of the map. I've search for hours and haven't found any info on doing this..
Does anyone have an idea how to do this or can point me at a resource that would explain it a little better?
Thanks!
The below is a modified version of 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>
For just a little while there I thought you might have uncovered a bug in the google API!... but no, alas that would have been too easy ;-)
Your basic problem here is that when you are sticking the div for your LatLngControl onto the map its' width is 0. So it goes where it is meant to be and when you put text into the div it expands out from that point. If you grab the map and pan it with your mouse, you'll notice the LatLngControl will reposition itself to the way you intended. So quick fix, make this modification:
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
}
If you really want the page to load with the latlng div invisible you'll need to futz around a little more - ultimately the hack I'm thinking of is to programmatically pan the map back & forth when you first move your mouse over the map - like when you shake a tv remote to make it work properly... but that's like icky.
Also this
position: absolute;
in your css is probably redundant. And so is this
divNode.index = 100;
...I know you're possibly trying to position the latlng div above the google legal blurb so it's not obscured. And that can be done, but you have to attach the div to the page directly and not via the map.
加载中,请稍侯......
精彩评论