Computer >> Máy Tính >  >> Lập trình >> HTML

Làm cách nào để sử dụng tọa độ vị trí địa lý trong HTML5?


API vị trí địa lý HTML5 cho phép bạn chia sẻ vị trí của mình với các trang web yêu thích của bạn. Javascript có thể nắm bắt được vĩ độ và kinh độ của bạn và có thể được gửi đến máy chủ web phụ trợ và thực hiện những việc quan tâm đến vị trí như tìm các doanh nghiệp địa phương hoặc hiển thị vị trí của bạn trên bản đồ. Tọa độ vị trí địa lý chỉ định vị trí địa lý của thiết bị.

Các phương thức định vị getCurrentPosition () và getPositionUsingMethodName () chỉ định phương thức gọi lại để truy xuất thông tin vị trí. Các phương thức này được gọi không đồng bộ với một đối tượng Vị trí lưu trữ thông tin vị trí đầy đủ.

Đối tượng Vị trí chỉ định vị trí địa lý hiện tại của thiết bị. Vị trí được biểu thị dưới dạng một tập hợp các tọa độ địa lý cùng với thông tin về hướng và tốc độ.

Các thuộc tính của đối tượng vị trí bao gồm -

Thuộc tính Loại Mô tả
coords
đối tượng
Chỉ định vị trí địa lý của thiết bị. Vị trí được biểu thị dưới dạng một tập hợp các tọa độ địa lý cùng với thông tin về hướng và tốc độ.
coords.latitude
Số
Chỉ định ước tính vĩ độ theo độ thập phân. Phạm vi giá trị là [-90,00, +90,00].
coords.longitude
Số
Chỉ định ước tính kinh độ theo độ thập phân. Phạm vi giá trị là [-180,00, +180,00].

Phần sau sử dụng đối tượng vị trí có tọa độ cho vĩ độ và kinh độ -

Làm cách nào để sử dụng tọa độ vị trí địa lý trong HTML5?

Đối tượng định vị cung cấp các phương thức sau. Tất cả chúng đều sử dụng tọa độ để truy xuất vị trí -

Phương pháp Mô tả
getCurrentPosition () Phương pháp này truy xuất vị trí địa lý hiện tại của người dùng.
watchPosition () Phương pháp này truy xuất các bản cập nhật định kỳ về vị trí địa lý hiện tại của thiết bị.
clearWatch () Phương pháp này hủy cuộc gọi watchPosition đang diễn ra.


Ví dụ

Bạn có thể thử chạy đoạn mã sau để tìm hiểu cách làm việc với vị trí địa lý và sử dụng tọa độ vị trí địa lý trong HTML5. Nó truy xuất các bản cập nhật định kỳ về vị trí địa lý hiện tại của thiết bị. Vị trí được biểu thị dưới dạng một tập hợp các tọa độ địa lý cùng với thông tin về hướng và tốc độ.

<!DOCTYPE HTML>
<html>
   <head>
      <script type="text/javascript">
         var watchID;
         var geoLoc;
         function showLocation(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            alert("Latitude : " + latitude + " Longitude: " + longitude);
         }
         function errorHandler(err) {
            if(err.code == 1) {
               alert("Error: Access is denied!");
            } else if( err.code == 2) {
               alert("Error: Position is unavailable!");
            }
         }
         function getLocationUpdate(){
            if(navigator.geolocation){
               // timeout at 60000 milliseconds (60 seconds)
               var options = {timeout:60000};
               geoLoc = navigator.geolocation;
               watchID = geoLoc.watchPosition(showLocation, errorHandler, options);
            } else{
               alert("Sorry, browser does not support geolocation!");|
            }
         }
      </script>
   </head>
   <body>
      <form>
         <input type="button" onclick="getLocationUpdate();" value="Watch Update"/>
      </form>
   </body>
</html>