Google지도 API v3에서 이동하지 않는 텍스트 오버레이를 만드는 방법은 무엇입니까?

Question

Google Maps API v3을 사용하고 있습니다. 지도를 패닝 할 때 움직이지 않는지도에 텍스트 오버레이를 만들고 싶습니다. MapPanes 객체에서 액세스 할 수있는 DOM 요소를 조작하는 최선의 방법인가요? 또는 표시 텍스트 이외의 다른 기능을 수행하지 않더라도 사용자 지정 컨트롤을 만드는 것이 가장 좋습니다.

Answer 1

나를 위해 일한 가장 간단한 방법은 새지도를 만든 후 몇 줄의 JavaScript를 추가하는 것입니다. 그래서,이 후 :

map = new google.maps.Map('myMapDivId', mapOptions); 

이 추가

var myTitle = document.createElement('h1'); 
myTitle.style.color = 'white'; 
myTitle.innerHTML = 'Hello World'; 
var myTextDiv = document.createElement('div'); 
myTextDiv.appendChild(myTitle); 

map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(myTextDiv); 

당신은 아마 더 좋은 볼 텍스트 스타일을 할 것입니다. 자바 스크립트에서이 작업을 수행 한 후

<div id="myTextDiv" style="color: white; position: absolute;"> 
    <h1>Hello World</h1> 
</div> 

과 :

var myControl = document.getElementById('myTextDiv'); 
map.controls[google.maps.ControlPosition.TOP_CENTER].push(myControl); 

주에게 중요한 차이를 :

대안은 HTML의 DIV를 넣어 당신이 정의하는 HTML 경로를 사용하는 경우 귀하의 div, 렌더링 문제를 피하기 위해 HTML에서 절대 위치 스타일을 설정해야합니다.

Answer 2

설명하신대로 최선의 방법은 맞춤 컨트롤입니다. 해당 문서는 here입니다. 사용자 정의 컨트롤은 원하는만큼 간단하거나 복잡 할 수 있습니다.

지도 창을 가지고 주변을 둘러보고 싶은 이유 중 하나는 마커/그림자/폴리선 등 아래에 '컨트롤'이 있어야한다는 것입니다. 지금 바로이 작업을 통해 십자선을 표시하고 있습니다. 항상지도의 중심. 그러나 오버레이로 유지하기 때문에 마커가 위에있는 방식으로 창이 선택되므로 계속 클릭하고 상호 작용할 수 있습니다 (mapPane 사용). 여기에 내가 그것을하고있어 방법은 다음과 같습니다

var CrosshairOverlay = function(map){ 
    this._holder = null; 
    this.setMap(map); 
}; 
CrosshairOverlay.prototype = new google.maps.OverlayView(); 
CrosshairOverlay.prototype.onAdd = function(){ 
    var map = this.getMap(); 
    var holder = this._holder = $('<div>').attr('id', 'crosshair')[0]; 

    var crosshairPaper = this._paper = R(holder, 150, 150); 
    // ... all your drawing and rendering code here. 
    var projection = this.getProjection(); 
    var wrappedHolder = $(holder); 

    var updateCrosshairPosition = function(){ 
     var center = projection.fromLatLngToDivPixel(map.getCenter()); 
     wrappedHolder.css({left:center.x-75, top:center.y-75}); 
    } 
    _.each(['drag','dragend','bounds_changed','center_changed','zoom_changed','idle','resize'], function(event){    
     google.maps.event.addListener(map, event, updateCrosshairPosition); 
    }); 
    google.maps.event.addListener(map, 'maptypeid_changed', function(){ 
     _.defer(updateCrosshairPosition); 
    }); 

    this.getPanes().mapPane.appendChild(holder); 
}; 
CrosshairOverlay.prototype.draw = function(){ 
}; 
CrosshairOverlay.prototype.onRemove = function(){ 
    this._holder.parentNode.removeChild(this._holder); 
    this._holder = null; 
}; 

유형을 변경할 때지도 제대로 자체를 설정하기 전에 이벤트가 발생되기 때문에 maptypeid_changed가 defer와 함께 자신의 핸들러가 이유입니다. 현재 이벤트 루프 이후에 함수를 실행하십시오.