谷歌地图自定义控件定位

我想弄清楚如何将我的控件定位到页面中心。但是当我使用“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>

来源

2011-01-25 Dennis

修改后的版本对于只是一小会儿还有我想你可能会发现谷歌的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附加到页面上，而不是通过地图。

来源

2011-01-26 02:21:58 nomaderWhat

谢谢！一整天都在盯着这个，而现在你的解释让我明白我以前看不到！我会更多地处理它，这样盒子的大小就是静态的，而且在平移时也不会显示。它以现在的方式服务于它的目的，就像修补它直到它的完美一样.. :)再次感谢！ – Dennis 2011-01-26 05:01:11

谷歌地图自定义控件定位

回答

相关问题