Googleマップのカスタムコントロールの配置

私はコントロールをページの中央に配置する方法を理解しようとしています。しかし、私が "BOTTOM_CENTER"を使うと、divの左端が地図の中心に集中します。 divの中心が地図の中央下にくるようにこれをオフセットしたいと思います。私は何時間も検索しましたが、これを行うための情報は見つかりませんでした..Googleマップのカスタムコントロールの配置

これを行う方法を知っている人はいますか？

ありがとうございます！私はそれがあまりにもされているだろう悲しいかな、！あなたは、GoogleのAPIのバグを発見したかもしれないと思った...しかし、誰がいる間

以下のほんの少しのために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

の修正版です簡単です;-)

ここでの基本的な問題は、LatLngControlのdivをマップに貼り付けるときに、その幅が0になることです。つまり、それはどこにあるのか、その点から広がります。地図をつかんでマウスでパンすると、LatLngControlが意図したとおりに位置を変えることに気付くでしょう。私はと思っています最終的にはハック - あなた本当にページはあなたがもう少し周りいじくるする必要があります目に見えない緯度経度のdivをロードする場合

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 
    }

：だから、クイックフィックスは、この変更を行いますあなたが最初に地図上にマウスを動かすときに、地図上で&の地図をプログラマチックにパンすることです。テレビのリモコンを振って正しく動作させるような場合ですが、それは嫌な感じです。あなたのCSSの

また、この

position: absolute;

おそらく冗長です。だから、私はあなたがおそらくそれが隠されていないので、Googleの法的な宣伝文句の上の緯度と経度のdivを配置しようとしている知っている...この

divNode.index = 100;

です。それはできますが、divを地図に直接貼り付ける必要はありません。

出典

2011-01-26 02:21:58 nomaderWhat

ありがとうございます！この一日中、あなたの説明を見て、私はまさに私が前に見ることができなかったでしょうか？私はもう少し作業をして、ボックスが静的でパンニング時には表示されないようにします。それは、今のようにその目的を果たしています。ちょうど完璧になるまでちょっとしたことをするのと同じです:)もう一度ありがとう！ – Dennis

あなたは大歓迎です、それはSOのためです。私は私の人生の大きな塊を紛失してしまった... ;-) – nomaderWhat

Googleマップのカスタムコントロールの配置

答えて

関連する問題