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


Bài viết này mình xin hướng dẫn cách dùng Google Map API để hiển thị vị trí hiện tại của người dùng. 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ọ chia sẻ vị trí thì ta sẽ bắt được qua hàm geo_success()

    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 !

Bình luận (0)

Bình luận (<{ numberComments }>)

  • avatar
    <{ comment.author.username }> Reply
    <{ comment.createdAt | date:'yyyy-MM-dd HH:mm:ss' }>
    • avatar
      <{ reply.author.username }>
      <{ reply.createdAt | date:'yyyy-MM-dd HH:mm:ss' }>