2013-02-25 4 views
0

중고 상품의 판매자를 보여주는 페이지를 씁니다. 지도에는 가격, 상태 및 판매자 가용 기간의 많은 짧은 정보 요소가 있습니다. 나는 정보창의 여유 공간을 줄여서 더 많은 정보를 화면에 표시 할 수 있기를 원합니다. "정보 창 내부 패널"하지만 운 - - 나는 개찰구-물건 gmap3의 6.5.0의 새로운 기능을 시도 그림은 CSS의 결과를 보여줍니다 :wicket-stuff gmap3 라이브러리에서 정보 창 크기를 줄이는 방법은 무엇입니까?

border : 1px solid black ; 
margin : 0; 
padding : 0; 

내가 창에 맞게 winfo 정보의 여유 공간을 최소화 할 수있는 방법을 콘텐츠에?

P. 포인터로 클릭 할 수있는 그룹을 만들면 가장 좋습니다. 하지만 정보창을 클릭 할 수 없으므로 마커가 있습니다. 아이디어 - 사용자는 먼저 정보창에 표시되는 주요 속성을 기반으로 선택을 한 다음 선택 사항을 클릭하고 페이지의 다른 곳에 표시된 정보를 완성합니다.

P.P.S. 흠, 이제 한 가지 생각이 더 들었습니다. 나는 상태와 함께 숫자를 필요로하지 않습니다. 나는 정보를 다른 색상으로 칠할 수 있습니다 (초록색 = "새것과 같음", 파란색 = "열심히 사용했지만 작동", 빨간색 = "쓰레기").

enter image description here

답변

1

신속하고 더러운 당신이 다음

#iw_content{background:#fff} 
.iw_content_container_container{height:auto!important;text-align:center} 
.closeInfoWindow {top:22px!important;right:22px!important} 
.closeInfoWindowContainer{position:absolute;top:52px;height:auto!important} 

당신은 엉망으로 할 수 있습니다 CSS로 해결할 수있는 코드에서 약간의 후크를 넣어 작동 할 수

var infowindow = new google.maps.InfoWindow({ 
    content: '<div id="iw_content"><a href="/" style="color:#f00">3434</a> <a href="/" style="color:#00f">4</a> <a href="/" style="color:#0f0">18-9</a></div>' 
}); 

google.maps.event.addListener(infowindow,'domready',function(){ 
    var el = document.getElementById('iw_content'); 
    //* Get and set a class for the main content containers container 
    el = el.parentNode.parentNode; 
    el.setAttribute('class','iw_content_container_container'); 
    //* Get and set a class for the div containing the close window image 
    closeEl = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling; 
    closeEl.setAttribute('class','closeInfoWindow'); 
    //* Get and set a class for the div containing the close and main content 
    el = el.parentNode; 
    el.setAttribute('class','closeInfoWindowContainer'); 
    //* Get and hide the troublesome background 
    el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling; 
    el.style.display = "none"; 
    //* Get and hide the top image of the arrow 
    el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling; 
    el.style.display = 'none'; 
    //* Get and hide the shadow (hiding commented out for now as not strictly requested) 
    el = el.parentNode.parentNode; 
    el = (el.previousElementSibling)?el.previousElementSibling.previousElementSibling:el.previousSibling.previousSibling; 
    //el.style.display = 'none'; 
}); 

about .closeInfoWindowContainer 맨 위 값은 텍스트 양에 따라 다르므로 기본적으로 하나의 라인으로 테스트됩니다.

실제로 너비와 높이를 코드 자체에서 제거 (자바 스크립트 내에서 추가/변경)했으나로드 할 때 커서의 상태와 위치에 따라 다시 매핑하는 성가신 습관이있었습니다.

...

정보 Windows를 클릭 할 수 있습니다. 그것들은 페이지의 정상적인 div 엘리먼트 일 뿐이므로 이와 같이 취급 될 수 있습니다. 하이퍼 링크 예제에서 다양한 값을 표시했습니다.

죄송합니다. wicketstuff이 아니지만 솔루션을 게시해야한다고 생각했습니다.

+0

대단히 감사합니다! 나는이 해결책을 채택하려고 노력할 것이다. – cynepnaxa

관련 문제