Google지도 V3 동적 자동 위치 지정이 포함 된 툴팁 팝업

Question

마커와 관련하여 팝업의 자동 위치 지정을 지원하는 Google지도 V3에서 작동하는 팝업 창이 표시되므로 전체 팝업 창이 항상 지도 뷰포트. 이 작업을 위해 InfoBox 라이브러리를 해킹하려고하지만 큰 번거 로움이 있습니다. 나는 또한 약속을 보여주는 QTip2를 살펴 보았지만 포지셔닝과 같은 단점이 있지만 수동으로 설정해야합니다.

편집 : 솔루션은지도를 이동하여 팝업 창을 표시 할 필요가 없습니다.

Answer 1

InfoInfo에 추가하여 SmartInfoWindow의 도움을 받아 InfoBox에 추가 할 수있었습니다. 이것은 부분적으로 사용자 정의 된 솔루션이므로 포지셔닝을 조정해야 할 수도 있습니다. 인포 박스의 각 모서리의 div 위치를 잡고 해당 모서리를 위도/경도로 다시 변환 한 다음지도 경계를 잡고 모서리가 범위 내에 있는지 확인합니다. 그렇지 않은 경우지도에서 벗어난 모서리에 따라 정보 상자 위치를 적절하게 조정합니다.

InfoBox.prototype.maybePanMap = function() { 
    // if we go beyond map, pan map 
    var map = this.getMap(); 
    var projection = this.getProjection(); 
    var bounds = map.getBounds(); 
    if (!bounds) return; 

    // The dimension of the infowindow 
    var iwWidth = this.div_.offsetWidth; 
    var iwHeight = this.div_.offsetHeight; 

    // The offset position of the infowindow 
    var iwOffsetX = this.pixelOffset_.width; 
    var iwOffsetY = this.pixelOffset_.height; 

    var anchorPixel = projection.fromLatLngToDivPixel(this.getPosition()); 
    var bl = new google.maps.Point(anchorPixel.x + iwOffsetX, 
     anchorPixel.y + iwOffsetY); 
    var br = new google.maps.Point(anchorPixel.x + iwOffsetX + iwWidth, 
     anchorPixel.y + iwOffsetY); 
    var tl = new google.maps.Point(anchorPixel.x + iwOffsetX, 
     anchorPixel.y + iwOffsetY - iwHeight + 100); 
    var tr = new google.maps.Point(anchorPixel.x + iwOffsetX + iwWidth, 
     anchorPixel.y + iwOffsetY - iwHeight + 100); 

    var sw = projection.fromDivPixelToLatLng(bl); 
    var se = projection.fromDivPixelToLatLng(br); 
    var nw = projection.fromDivPixelToLatLng(tl); 
    var ne = projection.fromDivPixelToLatLng(tr); 


    if (!map.getBounds().contains(nw) && !map.getBounds().contains(sw)) {   
    this.div_.style.left = (anchorPixel.x + 10) + 'px'; 
    if (!map.getBounds().contains(ne)) { 
     this.div_.style.top = (anchorPixel.y - 100) + 'px'; 
    } 
    } else if (!map.getBounds().contains(nw) && !map.getBounds().contains(ne)) { 
    this.div_.style.top = (anchorPixel.y - 100) + 'px'; 
    if (!map.getBounds().contains(se)) { 
     this.div_.style.left = (anchorPixel.x - iwWidth - 10) + 'px'; 
    } 
    } else if (!map.getBounds().contains(ne) && !map.getBounds().contains(se)) { 
    this.div_.style.left = (anchorPixel.x - iwWidth - 10) + 'px';   
    if (!map.getBounds().contains(sw)) { 
     this.div_.style.top = (anchorPixel.y - iwHeight - 100) + 'px'; 
    }   
    } 


}; 

Answer 2

V3 Demo Gallery에서 빠른 검색으로 SmartInfoWindow을 찾았습니다. 네가 원하는대로하는 것 같아. 여기 google code project이 있습니다.