HTML 위치정보
- 王林원래의
- 2024-09-04 16:51:16567검색
지금까지 우리는 HTML을 사용하여 디자인되는 많은 기능을 보았습니다. HTML에 포함된 최신 고급 기능 중 하나는 위치정보입니다. HTML 위치정보는 지도에서 사용자 위치를 감지하는 데 가장 유용합니다. 따라서 이 기능은 지도에서 사용자의 정확한 위치를 식별하기 위해 HTML로 설계되었습니다. 이러한 사용자의 위치는 특정 사용자 위치의 위도, 경도라는 속성을 이용하여 식별할 수 있습니다. 사용자가 해당 위치에 액세스하도록 허용한 경우에만 정보를 검색할 수 있습니다. 이 HTML 기능은 주로 지역 비즈니스 목적, 레스토랑 찾기 또는 지도에서 위치 선택에 사용됩니다.
구문
HTML 위치정보에 대한 구문은 다음과 같습니다. 아래와 같이 전역 탐색기 개체를 사용하는 위치 API를 사용할 수 있습니다.
var locat = navigator.geolocation;
위 구문 탐색기로 들어갑니다. 위치 정보에 접근하기 위해 사용자 브라우저를 담당하는 지리적 위치 하나의 액세스가 정의됩니다. 브라우저는 기기에 존재하는 최고의 기능을 제공할 수 있으므로 이 데이터에 쉽게 액세스할 수 있습니다.
이 데이터는 사용자나 장치의 현재 위치를 파악하기 위한 getCurrentPosition, 장치의 위치가 변경될 때마다 유용한 watchPosition, 지우는 데 도움이 되는clearWatch와 같은 다른 방법을 사용하여 효율적으로 액세스할 수 있습니다. 위치정보 기능의 모든 통화.
이 기능은 다음과 같은 일부 인터페이스에서 작동합니다.
- 위치정보: 메인 클래스에서 가장 중요한 API 중 하나로, 사용자의 현재 위치를 파악하고 위치 변화를 감시하는 데 도움이 되는 몇 가지 메서드가 포함되어 있습니다.
- GeolocationPosition: 사용자의 위치를 정의하는 데 사용됩니다. 지리적 위치 중 하나에서 성공 호출이 식별될 때마다 해당 개체 인스턴스와 조정됩니다.
- 지리적 위치 좌표: 이는 사용자 위치의 좌표를 식별하는 데 도움이 됩니다.
- GeolocationPositionErrror: 이 인터페이스는 실패한 호출이 위치정보에 포함된 메서드로 반환되도록 호출됩니다.
- Geolocation: 이는 Geolocation에서 Geolocation 개체 인스턴스를 호출할 때 유용합니다. 따라서 여기에서 다른 모든 기능에 액세스할 수 있습니다.
위치정보 방법+63
Geolocation 인터페이스로 위치를 정의하기 위해 HTML Geolocation에서 사용되는 방법은 총 3가지입니다. 그 내용은 다음과 같습니다:
- getCurrentPosition(): HTML 위치정보의 이 기본 메소드는 기기나 사용자의 현재 지리적 위치와 지도상의 반환 데이터를 감지하는 데 도움이 됩니다. 이 방법은 성공, 오류, 옵션과 같은 다양한 매개변수에 대해 작동합니다.
- watchPosition(): 기기 위치가 변경된 후 사용자가 위치를 확인하고 싶을 때마다 코딩 내에서 호출되어 변경된 기기 위치를 확인합니다. 이 메서드는 알 수 없는 무작위 오류와 같은 오류 콜백 함수를 호출합니다. 주어진 위치 정보를 사용할 수 없고 요청한 위치가 시간 초과된 경우 사용자는 위치 공유를 허용하지 않습니다.
- clearWatch(): 이 HTML 위치정보 방법을 사용하면 이전 watchPosition() 호출을 취소할 수도 있고 진행 중인 watchPosition 호출도 취소할 수 있습니다.
HTML 위치정보의 예
다음은 HTML 위치정보의 예입니다
예시 #1
첫 번째 예에서는 브라우저가 이 위치 정보 기능을 지원하는지 여부를 살펴보겠습니다. 아래에 언급된 코드는 다음과 같습니다.
HTML 코드:
<!DOCTYPE html>
<html>
<head>
<title>HTML Geolocation</title>
</head>
<body>
<h4>HTML Geolocation</h4>
<button onclick="getlocation()">Click Here</button>
<br>
<br>
<br>
<p>As we all know, geolocation is the feature used for positioning the exact location of the user or device. But the first step we have to check whether our browser is going to support this geolocation feature or not. </p>
<h4> This Example illustrates whether our browser is going to support for geolocation or not.</h4>
<div id="geolocation1"></div>
<script>
var x= document.getElementById("geolocation1");
function getlocation() {
if(navigator.geolocation){
alert("My browser is going to support Geolocation feature")
}
else
{
alert("Oops! My browser is not going to support Geolocation feature")
}
}
</script>
</body>
</html>
출력:
예시 #2
이 예에서는 HTML 위치정보 기능을 사용하여 정확한 위치를 표시하므로 위도 및 경도에 대한 속성 값을 사용하여 지도에 정확한 위치를 표시합니다.
HTML 코드:
<!DOCTYPE html>
<html>
<body>
<h4>HTML Geolocation Latitude and Longitude Value</h4>
<p>Example showing Geolocation , It will give values for the latitude and longitude after clicking below button</p>
<button onclick="getLocation()">Click Here</button>
<p id="geolocation"></p>
<script>
var x = document.getElementById("geolocation");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showgeolocPosition);
} else {
x.innerHTML = "This code is not supported in geolocation for your browser";
}
}
function showgeolocPosition(position) {
x.innerHTML = "Latitude Attribute Value: " + position.coords.latitude +
"<br>Longitude Attribute Value: " + position.coords.longitude;
}
</script>
</body>
</html>
출력:
버튼을 클릭하면 아래와 같이 출력됩니다
예시 #3
이 예에서는 HTML 위치정보 기능을 사용하여 정확한 위치를 표시하므로 위도 및 경도에 대한 속성 값을 사용하여 지도에 정확한 위치를 표시합니다.
HTML 코드:
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
</head>
<style>
#mapdemo{
width: 500px;
height: 500px;
margin-left: 200px;
}
</style>
<body>
<h2>Find Your Location on Google Map</h2>
<p>In this Example we are going to see exact location on Google map, where actually we are.</p>
<button onclick="getlocation();"> Show my position on Map </button>
<div id="mapdemo">
</div>
<script src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function getlocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPos, showErr);
}
else{
alert("Sorry! your Browser does not support Geolocation API")
}
}
// Current Poistion on Google Map
function showPos(position){
latt = position.coords.latitude;
long = position.coords.longitude;
var lattlong = new google.maps.LatLng(latt, long);
var myOptions = {
center: lattlong,
zoom: 15,
mapTypeControl: true,
navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL}
}
var maps = new google.maps.Map(document.getElementById("mapdemo"), myOptions);
var markers =
new google.maps.Marker({position:lattlong, map:maps, title:"Your position on map!"});
}
function showErr(error) {
switch(error.code){
case error.PERMISSION_DENIED:
alert("User or Device not allow to accept your request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("USer or Device exact location information is currently unavailable.");
break;
case error.TIMEOUT:
alert("Requested request is getting time out .");
break;
case error.UNKNOWN_ERROR:
alert("Something unknown error is accrued.");
break;
}
} </script>
</body>
</html>
출력:
Kesimpulan
Daripada semua maklumat di atas, kami mendapat tahu bahawa geolokasi HTML ialah ciri yang digunakan untuk mengenal pasti sama ada peranti atau lokasi pengguna pada peta.
Ia menggunakan atribut latitud dan longitud untuk mengenal pasti kedudukan sebenar pengguna.
Ciri ini berfungsi pada kaedah yang berbeza seperti getCurrentPosition, watchPosition dan clearWatch.
위 내용은 HTML 위치정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!