2011-01-25 123 views
4

我想弄清楚如何將我的控件定位到頁面中心。但是當我使用「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 + '&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> 

回答

1

修改後的版本對於只是一小會兒還有我想你可能會發現谷歌的API中的錯誤!...但沒有,唉那會是太容易;-)

這裏的基本問題是,當您將LatLngControl的div粘貼到地圖上時,它的寬度爲0.所以它會到達它的位置,並且當您將文本放入div時從這一點展開。如果您抓住地圖並用鼠標平移地圖,您會注意到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 
    } 

如果你真的的頁面位置的經緯度格無形加載你需要futz周圍多一點 - 我想最終的黑客當你第一次將鼠標移動到地圖上時,就會以編程的方式將地圖平移回& - 就像搖動電視遙控器以使其正常工作一樣...但這就像icky。

而且這個

position: absolute; 
在你的CSS

可能是多餘的。這是這樣的

divNode.index = 100; 

...我知道你可能試圖定位latlng div谷歌合法blurb之上,所以它不被遮蓋。這可以做到,但你必須直接將div附加到頁面上,而不是通過地圖。

+0

謝謝!一整天都在盯着這個,而現在你的解釋讓我明白我以前看不到!我會更多地處理它,這樣盒子的大小就是靜態的,而且在平移時也不會顯示。它以現在的方式服務於它的目的,就像修補它直到它的完美一樣.. :)再次感謝! – Dennis 2011-01-26 05:01:11