Question

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

Answer 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
  }

如果你真的想要加载latlng div隐藏的页面你需要更多的东西 - 最终我想到的是以编程方式平移地图和放大器;当你第一次将鼠标移到地图上时 - 比如当你摇动电视遥控器以使其正常工作时......就像icky那样。

也是这个

position: absolute;

在您的CSS中

可能是多余的。这是

divNode.index = 100;

...我知道你可能试图将latlng div定位在google legal blurb之上，所以它不会被模糊。这可以做到，但你必须直接将div附加到页面而不是通过地图。

Google地图自定义控件定位

1 个答案: