2010-08-09 3 views
2

웹 사이트에 Google지도를 구현 중입니다.지도에 Google의 '길 찾기'상자 표시

하나의 요구 사항은 Google지도에서 사용하는 것과 동일한 입력란을 포함하고 사용자가 버튼을 클릭 할 때 팝업되는 길 찾기 상자를 표시하는 것입니다.

Google Maps API를 사용하면 서로 다른 두 위치 사이에 선을 그릴 수 있습니다.

상자를 직접 코딩하는 대신 API를 사용하여 길 찾기 상자 자체를 표시 할 수 있습니까?

참고 : 나는 초기 방향을 말하는 겁니다이 형성 - 즉 당신이 'A'와 'B'목적지를 입력하고 '길 찾기'를 클릭되는 형태.

답변

2

예, DirectionsRenderer은 '길 찾기 상자'를 자동으로 렌더링 할 수 있습니다. 단순히 당신의 HTML에 <div id="dir_box">을 만든 다음 setPanel() 방법을 통해 DirectionsRenderer 객체에 전달합니다 밖으로

directionsDisplay = new google.maps.DirectionsRenderer(); 
directionsDisplay.setMap(map); 
directionsDisplay.setPanel(document.getElementById('dir_box')); 

확인 기본적인 예를 들어, Google지도 API 튜토리얼에서 this example :

Displaying Google’s ‘directions’ box on a map

+0

안녕 대니얼, 네가 고마워. 불행히도 이것은 매우 최소한의 렌더링 인 것 같습니다. '여행 모드'아이콘 (예 : 자동차, 도보, 버스)도 포함되지 않습니다. Google UI와 거의 유사하지 않기 때문에 요소를 직접 코딩하고 자신 만의 스타일을 적용 할 수 있습니다. 나는이 노력을 피하기를 바랬지만 나는 할 수 없다고 생각한다. – Jonathan

+1

@jonathanconway : 예, API는 직접 빌드하는 데 필요한 모든 것을 제공합니다. 그러나 CSS 스타일로 패널을 스타일링 할 수는 있습니다. Google이이 테이블을 렌더링하는 데 사용하는 CSS 클래스는 매우 체계적으로 보입니다. 기본 스타일링은 CSS에서 실용적이라고 생각합니다. –

+0

그래서 나는 그저 나 자신으로하고있다. 간단한 HTML을 작성하고 직접 스타일을 지정할 때 Google의 지저분한 마크 업으로 시간을 낭비하는 점은 무엇입니까? – Jonathan