Hướng dẫn tự động bắt vị trí hiện tại bằng Google Map API

1
476
views

Hướng dẫn cách tự động bắt vị trí hiện tại bằng Google Map API

(Bạn nào chưa biết cách dùng Google Map API thì có thể tham khảo bài viết này)

Bài viết này mình xin hướng dẫn các bạn cách bắt vị trí hiện tại bằng Google Map API . Hiện nay thi hầu hết các browser đều hỗ trợ bắt vị trí qua IP người dùng, tuy nhiên độ chính xác của nó thì rất tương đối. Nhưng trong một chừng mực nào đó thì chấp nhận được.

Hai file cần include đó là :

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>

Để bắt được vị trí người dùng thì họ phải đồng ý chia sẻ vị trí của mình trên browser.

$(document).ready(function() {
  if (navigator && navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(geo_success, geo_error);
  } else {
    alert(''Rất tiếc trình duyệt của bạn không hỗ trợ chia sẻ vị trí vệ tinh'');
  }
});

window.app_info = {};    

Khi gọi hàm navigator.geolocation.getCurrentPosition() thì browser sẽ bật một thông báo cho người dùng. Nếu họ đồng ý chia sẻ vị trí thì ta sẽ lấy được vị trí của user qua hàm geo_success(). Còn nếu user từ chối chia sẻ vị trí thì ta có thể hiển thị thông báo lỗi qua hàm geo_error()

function geo_success(position) {
  window.app_info.myLat = position.coords.latitude;
  window.app_info.myLng = position.coords.longitude;
  reverse_geocode(window.app_info.myLat, window.app_info.myLng);
}

function geo_error() {
  //hiển thị thông báo lỗi ở đây
}    

như vậy bạn đã bắt được vị trí hiện tại của người dùng ở (window.app_info.myLat, window.app_info.myLng) và có thể dùng cặp vị trí này hiển thị lên bản đồ.

Tuy nhiên, ta có thể làm thêm một bước là hiển thị quận huyện hay con phố mà user đang đứng bằng hàm reverse_geocode()

var geocoder;

function reverse_geocode(lat, lng) {
  var latlng = new google.maps.LatLng(lat, lng);
  geocoder = new google.maps.Geocoder();
  geocoder.geocode({ ''latLng'': latlng }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[1]) {              
        window.app_info.result = results[1].address_components;
        for (var s in window.app_info.result) {
          if (window.app_info.result[s].types) {
            if (window.app_info.result[s].types.contains(''administrative_area_level_2'')) {
             window.app_info.GeoDistrict = window.app_info.result[s].long_name;
            } else if (window.app_info.result[s].types.contains(''sublocality'') || 
            window.app_info.result[s].types.contains(''neighborhood'')) {
              window.app_info.GeoStreet = window.app_info.result[s].long_name;
            }
          }
        }
        alert(''bạn đang ở '' + window.app_info.GeoStreet + '', '' + window.app_info.GeoDistrict);
      }
    } else {
      alert("Geocoder failed due to: " + status);
    }
  });
} 

Chúc các bạn thành công !

1 BÌNH LUẬN

BÌNH LUẬN

Please enter your comment!
Please enter your name here