Google지도 맞춤 컨트롤 위치 지정

내 컨트롤을 페이지 중앙에 배치하는 방법을 알아 내려고하고 있습니다. 하지만 "BOTTOM_CENTER"를 사용하면 div의 왼쪽 끝을지도의 가운데에 맞 춥니 다. div의 중심이지도의 아래쪽 중앙에 있도록이 값을 상쇄하고 싶습니다. 몇 시간 동안 검색을 해본 결과 아무 정보도 찾지 못했습니다 ..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이 의도 한대로 위치를 변경합니다. - 내가 생각하고 궁극적으로 해킹이 정말이 보이지 않는 LatLng를 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 
    }

당신이 좀 더 주위 futz에해야합니다 : 그래서 빠른 수정이 수정을 처음에지도 위에 마우스를 가져 가면 &의지도를 다시 프로그래밍 방식으로 이동하는 것입니다. TV 리모콘을 흔들어 제대로 작동하게 할 때처럼 ...하지만 그것은 icky와 같습니다.

또한 CSS에서이

position: absolute;

아마 중복됩니다. 그래서 난 당신이 가능성이 가려하지 그래서 구글 법적 추천 광고 위의 위도와 경도를 DIV를 배치하려는 알고 ...이

divNode.index = 100;

입니다. 그리고 그 작업을 수행 할 수 있지만지도를 통해 직접 div를 페이지에 첨부해야합니다.

출처

2011-01-26 02:21:58 nomaderWhat

고마워요! 하루 종일 여기에서 꼼짝 않고 바라보고 있었고, 지금 당신의 설명으로 나는 전에 볼 수 없었던 것을 정확하게 볼 수 있습니다! 나는 그 상자가 정적 인 크기로 패닝 (panning) 할 때 표시되지 않도록 조금 더 작업 할 것입니다. 그것은 그것의 목적이 지금과 같은 방식으로 작용합니다. 마치 완벽한 때까지 땜장이처럼 .. :) 다시 한번 감사드립니다! – Dennis

당신은 환영합니다. 그것이 바로 SO입니다. 나는 삶의 큰 덩어리를 만지작 거리다 ... ;-) 잃어 버렸다. – nomaderWhat

Google지도 맞춤 컨트롤 위치 지정

답변

관련 문제