HTML에서 사용자 위치를 찾는 방법은 무엇입니까?

때때로 사용자의 현재 위치를 찾은 다음 웹 페이지에 위치 좌표를 표시하거나 지도에 위치를 표시하는 작업이 있습니다. HTML과 자바스크립트 코드를 사용하여 이 문서에서는 HTML 페이지에서 사용자의 현재 위치를 가져오는 프로세스를 보여줍니다. 두 가지 다른 예를 사용하여 설명합니다. 첫 번째 예에서는 사용자의 현재 위치를 가져온 다음 HTML 페이지에 위치 좌표를 표시할 수 있습니다. 두 번째 예에서는 오픈 소스 Leaflet 지도 라이브러리를 사용하여 지도에서 사용자의 현재 위치를 얻고 표시합니다.

예제 1: 사용자의 현재 위치를 찾아 HTML 페이지에 위치 좌표를 표시합니다.

코드 설명 및 설계 단계 −

1단계 - HTML 파일을 만들고 코드 작성을 시작하세요.

2단계 - 라벨을 만들고

위치 좌표를 표시하도록 설정합니다.

3단계 - 버튼을 만들고 버튼을 클릭하면 getYourLoc() 함수를 호출합니다.

4단계 - <script> 태그에 코드를 작성하고 두 개의 함수 getYourLoc() 및 showMyPos(pos)를 만듭니다. </script>

5단계 − navigator.geolocation.getCurrentPosition()을 사용하여 현재 위치를 찾기 위해 getYourLoc()에 자바스크립트 코드를 작성한 다음 showMyPos(pos)를 호출하세요.

6단계 - showMyPos(pos)를 사용하여 이전에 생성된

태그에 위치를 추가합니다. 검사 결과.

중요 파일 사용 − locationfile.html

Code For parentFolderFile.html:

의 중국어 번역은 다음과 같습니다.

parentFolderFile.html의 코드:

으아악

결과 보기

결과를 보려면 브라우저에서 loactionfile.html 파일을 엽니다. 이제 버튼을 클릭하면 사용자의 현재 위치를 찾을 수 있습니다. 좌표는 HTML 페이지에 표시됩니다.

예시 2: 사용자의 현재 위치를 찾아 지도에 위치 좌표를 표시합니다.

코드 설명 및 설계 단계 −

1단계 - HTML 파일을 만들고 코드 작성을 시작하세요.

2단계 - 라벨을 만들고

위치 좌표를 표시하도록 설정합니다.

3단계 - 버튼을 만들고 버튼을 클릭하면 getYourLoc() 함수를 호출합니다.

4단계 − <script> 태그 안에 코드를 작성하고 getYourLoc() , showMyPos(pos) 및 showmap(pos) 세 가지 함수를 만듭니다.</script>

5단계 − navigator.geolocation.getCurrentPosition()을 사용하여 현재 위치를 찾기 위해 getYourLoc()에 자바스크립트 코드를 작성한 다음 showMyPos(pos) 및 showmap(pos) 함수를 모두 호출합니다.

6단계 - showmap(pos) 함수에서 지도를 표시할 때 전단지 라이브러리를 포함하고, 기본 지도를 사용하고, 마커를 설정하고, 현재 위치 좌표를 전달하여 지도 위치를 표시합니다.

7단계 - showMyPos(pos)를 사용하여 이전에 생성된

태그에 위치를 추가합니다. 지도도 표시합니다. 검사 결과.

중요 파일 사용 − locationfile11.html

locationfile11.html의 코드:

으아악

결과 보기

결과를 보려면 브라우저에서 loactionfile11.html을 엽니다. 이제 버튼을 클릭하면 사용자의 현재 위치가 지도에 표시됩니다.

이 HTML 문서에서는 두 가지 다른 예를 사용하여 사용자의 현재 위치를 찾는 방법을 보여줍니다. 먼저 위치를 획득한 후 페이지에 위치 좌표를 표시하는 방법을 소개하고, HTML 페이지에 위치를 표시하면서 이 좌표를 이용하여 지도에 표시하는 방법을 소개한다.

위 내용은 HTML에서 사용자 위치를 찾는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!