Google지도의지도 타일 내에서 대화 형 내부

Question

나는이 질문을 stackoverflow에 요청했지만 원하는 결과를 얻지 못했습니다.

그래서 다시 게시하고 자세한 내용을 제공하고 싶습니다.

는 오리지널 포스트는 found here지도 타일 (IMG)의 기능을 통해 mosue가, 커서가 "포인터"로 변경됩니다, 그리고 당신은 바로 이곳을 클릭 할 수 있습니다

, 당신은 얻을 것이다 될 수 있습니다 정보 제공 창구. 이것이 내가 말하는 "대화 형"입니다.

제 생각에는지도를 드래그하거나 확대/축소 할 때 Google에서 서버에 요청하여 현재지도보기 내부의 기능을 가져옵니다. 그런 다음 마우스가 한 피쳐의 바운드 안으로 이동하면 효과가 발생합니다.

그러나 내가 그렇게 궁금한 것은 어떻게 그렇게 정밀 할 수 있는가하는 것입니다.

exmaple로이 타일을 가지고 :

기능의 영역 "리들리을 ...."일반 RECT가 아닌, 마우스는이 기능의 영역에 있지 않은 경우 커서는 변경되지 않습니다.

그러나 마우스, 효과가 나올 것입니다 (이 기능의 영역 내에서) 바로 이곳에 와서 일단이 확인 : 마우스의 위치의 영역 내에 precisly 때문에

을 이 기능을 클릭하면 정보 창이 나타납니다.

나는 이것을 구현하는 방법을 알고 싶습니까?

업데이트 : 특정 영역에 마우스가이 검사시

이

효과는 나오지 :

이 효과는 강조 표시된 RECT 내부 만 경우 마우스 이동을 올 지역, 매우 precisly.

Answer 1

폴리곤 기반의 AREA 태그를 사용할 수 있습니까? http://www.w3.org/TR/html4/struct/objects.html#edef-AREA?

정의에 따르면 이러한 태그는 사각형 일 필요는 없습니다. 그들은 <area shape='poly' coords='...'>과 같은 것을 사용할 수 있습니다. 좌표는 원하는만큼 정확할 수 있습니다.

UPDATE : 내가 대답하기 전에 http://maps.google.com을 확인하는 기회가 없었어요,하지만 지금은 이미지 맵을 사용하지 않는, 따라서 기능이 AREA 태그를 기반으로하지 않습니다 알 수 있습니다. 그러나 직사각형이 아닌 이미지 맵 오버레이의 기능을 원한다면 초기 응답은 여전히 ​​유효합니다.

Answer 2

이것은 javascript를 사용하며 표시 할 실제 콘텐츠는 display none 스타일 속성이있는 div 요소의 사용 가능한 서버에서 이미 채워져 있습니다. 확대/축소 수준 16의 각 256 x 256 이미지에는 서버뿐만 아니라 x 및 y에 대한 정보가 들어 있습니다.Google지도를 볼 때 파이어 버그를 사용하여 코드를 변경하면 이미지 목록 하단에 "css-3d-bug-fix-hack"클래스가있는 많은 div 요소가 있음을 알 수 있습니다. 이 요소 중 하나에는 어린이도 있습니다. 첫 번째 아이가 숨겨져 있습니다. 그 아이의 표시 없음을 제거하기 만하면 표시됩니다.

이러한 기능을 구현하려면 자바 스크립트를 사용하여 커서 위치를 얻는 방법, 커서가 javascript를 사용하여 div 요소에 있는지 확인하는 방법 또는 JQuery 선택기를 사용하여 특정 유형의 현재 배치 된 요소를 테스트 할 수 있어야합니다. 또한 CSS의 절대 위치를 이해해야합니다. 그런 다음 javascript를 사용하여 cusrsor 위치에 요소를 숨기고 표시하십시오.

Answer 3

google.maps.Marker 객체는 예를 들어, 다음과 같은 사용자 이벤트를 수신 할 수 있습니다

'click' 'dblclick' 'mouseup' 'mousedown' 'mouseover' 'mouseout'

이

http://code.google.com/apis/maps/documentation/javascript/events.html

GoogleMap으로이를 통해 데이터에 대한 설명을 오버레이 정보창을 사용하여 채점자.

InfoWindows는지도 위의 떠 다니는 창에 콘텐츠를 표시합니다. 정보 창은 만화책 단어 풍선처럼 약간 생겼습니다. 내용 영역과 줄기 끝이 지정된 위치에있는 테이퍼 된 줄기가 있습니다. Google지도에서 비즈니스 마커를 클릭하면 정보 창 ( )을 볼 수 있습니다. InfoWindow 생성자는 정보창을 표시하기위한 초기 매개 변수 집합 을 지정하는 InfoWindow 옵션 객체를 사용합니다. 생성시 정보창이지도에 추가되지 않습니다. 정보 창 을 보이게하려면 InfoWindow에서 open() 메서드를 호출하고 열기 위해 Map을 으로 전달하고, 선택적으로 에 앵커를 지정하는 마커를 전달해야합니다. 마커를 만들기

http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

을 (마커가 제공되지 않는 경우 정보 창은. 그 position 속성에서 열립니다)와 마우스 오버 이벤트

var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
var myOptions = { 
    zoom: 4, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
} 

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

var contentString = '<div id="content">'+ 
    '<div id="siteNotice">'+ 
    '</div>'+ 
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+ 
    '<div id="bodyContent">'+ 
    '<p><b>Uluru</b>, Test 
    '</div>'+ 
    '</div>'; 

var infowindow = new google.maps.InfoWindow({ 
    content: contentString 
}); 

var marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    title:"Uluru (Ayers Rock)" 
}); 

google.maps.event.addListener(marker, 'mouseover', function() { 
    infowindow.open(map,marker); 
}); 

으로 정보창을 첨부

수정 됨 의견을 본 후

Google지도는 JavaScript를 광범위하게 사용합니다. 사용자가지도를 드래그하면 그리드 사각형이 서버에서 다운로드되어 페이지에 삽입됩니다. 사용자가 업체를 검색하면 결과가 배경에 다운로드되어 측면 패널 및지도에 삽입됩니다. 페이지가 다시로드되지 않습니다. 위치는지도 이미지 위에 빨간색 핀 (여러 개의 부분 투명한 PNG로 구성)을 배치하여 동적으로 그려집니다.

양식 제출이있는 숨겨진 IFrame은 브라우저 기록을 보존하기 때문에 사용됩니다. 또한 사이트는 성능상의 이유로 XML 대신 데이터 전송을 위해 JSON을 사용합니다. 이 두 기술은 모두 Ajax의 포괄적 인 우산에 속합니다. [위키 백과에서]