자바 스크립트로 웹 인터페이스를 구현하는 몇 가지 팁과 트릭을 통해 사용자가 맵에서 미리 정의 된 일부 영역을 클릭하여 반환 할 수있게하고 싶습니다. 제출 버튼을 클릭 할 때 클릭 된 영역의 목록입니다. 그러면이 목록이 서버로 전송됩니다 (HTTP "게시"방법을 사용할 수 있음).HTML 이미지 맵을 사용하여 자바 스크립트 웹 인터페이스를 구현하는 데 필요한 팁과 트릭
첫 번째 질문은 :지도에서 지역을 정의하는 방법. HTML 이미지 맵에 대해서는 적색이지만 각 영역의 좌표를 추출해야하므로 번거로운 것처럼 보입니다. 이미지에서이 목록을 자동으로 생성하는 방법이 될지 궁금합니다.
두 번째 질문은 사용자가 제출 버튼을 클릭 할 때 서버에 보낼 수 있도록 클릭 된 영역 목록을 저장하는 방법입니다. 아마 경험 자바 스크립트 프로그래머 ;-)
덕분에 거기 밖으로 많은 이미지 맵 생성 프로그램의
[지역 업데이트 할 수 있습니다
온 클릭 :, 또는 당신을 위해 그것을 할 수있는 유틸리티를 찾을 수 = "document.forms [0] .clicked.value + = ', region 3 ' "... />
[영역의 onclick ="하고 document.forms [0] + = .clicked.value'region4 '... "/>
[형태 onsubmit ="var에 발 = this.clicked.value; 경우 (발) this.clicked.value val.substring = 1 ">
[입력 타입 ="숨겨진 "이름 ="클릭 "값 =" "/>
스크립트 제거 쉼표
은 [<에 변경하시기 바랍니다 선도 -. 그래서 위의 코드
그것은 당신이에서지도를 받고있어 위치에 따라 달라집니다 저에게 힘든 시간을 제공하는 공개 API가 거기를 ? 일반적으로 나는 그들이 woul라고 말하고 싶지만 d는 수동으로 추가해야합니다. 이 작업을 쉽게 수행 할 수있는 인터페이스를 만들 수 있도록 특정 영역 주변의 작은 상자를 드래그 한 다음 카운티, 지역 번호 등과 같은 세부 정보를 입력 할 수 있습니다.
2 - 다차원 배열. map[x][y].town = 'uxbridge' 그러면 이벤트 리스너를 이미지에 위임합니다. 마우스가 클릭 된 x, y 좌표를 찾아지도 배열을 반복하여 일치하는지 확인합니다. 사용자는 배열에서 찾을 수 있도록 1px 지점을 클릭해야합니다. 따라서 이것을 피하려면 50px의 "간격"값을 사용하십시오. 따라서 x, y는 어느 쪽이든 50px가 될 수 있습니다. 그런 다음 해당 영역을 강조 표시하고 영역 배열에 추가하십시오.이 아마도 map[] 배열을 검색 할 수 <map> 더 나은 알고리즘이 일을 더 나은 방법이 있지만, 궁극적으로 당신은지도에 모든 요소를 변환해야 할 것 []
<area>에 배열
사실은 스크랩하면 <map><area>이 훨씬 쉽고 적합합니다. 여기에서 가장 큰 문제는 영역을 map[] 배열에 저장하는 방법을 찾는 것입니다. 다시 한 번 말하지만,이 점은 사용할 수있는 API에 관한 모든 것 또는 인터페이스를 통해 수동으로 추가 할 수있는 API에 관한 것입니다. 그런 다음 배열을 반복하고 x, y, w, h 좌표가있는 각 코드를 area에 출력하고 완료되면 DOM으로 푸시합니다. 그런 다음 각 리스너에 이벤트 리스너를 추가하십시오.보다 효율적인 이벤트를 원하면 <map>에 이벤트 리스너를 위임하여 온 클릭 이벤트를 처리하십시오. 그런 다음 해당 영역 요소의 map [] 배열에서 데이터를 가져옵니다.
도움을 주셔서 감사합니다. 공개 API 또는 그 밖의 것이 없습니다. 사실 내 자신의 지역을 정의합니다 (국가 또는 국가 내의 하위 구분에 해당하지 않습니다). SVG를 이미지 맵으로 자동 변환하는 스크립트가 있습니다 (http://stackoverflow.com/questions/3320952/how-to-automatically-create-imagemaps-of-grey-maps-from-wikipedia 참조). 그래서 저는 영역 레이블이 포함 된 png 이미지를 SVG 이미지로 변환 할 수 있는지 확인합니다. – user421800
필자는 maphilight 스크립트 (http://davidlynch.org/js/maphilight/)를 사용해 보았지만 꽤 잘 돌아 갔지만 많은 영역 (약 10000 개 영역)의 맵을 사용할 때 많은 CPU 시간을 소비하는 것으로 보입니다. 그 문제를 해결할 방법이 있을까요? http://formidablo.nl/jquery/
그지도 작성 프로그램은 일반적으로 입력으로 SVG 이미지를 가지고 : 그런데
는 여기에 해당이 스크립트의 개선 된 버전이 http://stackoverflow.com/questions/3320952/how- to-automatically-create-imagemaps-of-grey-maps-wikipedia – user421800