Khi bạn làm một website hay một app web, bạn muốn lấy thông tin vị trí bản đồ hay còn gọi vị trí người truy cập web hãy lập trình theo các bước sau

Hướng dẫn các bạn cách lấy tọa độ của người truy cập web

Khi lập website hay một app web lập trình viên cần tính năng lấy tọa độ của người truy cập web thì cần code như thế nào ?

Việc này rất đơn giản bạn chỉ cần một đoạn script và html thông qua trình duyệt sẽ lấy được tọa độ map của người truy cập web ?
Về bảo mật thì cần quyền để truy cập có nghĩa khi bào trình duyệt sẽ hỏi bạn có cho phép web đang truy cập lấy tọa độ hay không, nếu người dùng cho phép thì trinh duyệt sẽ lấy vị trị và trả về 1 tọa độ x,y
Mời các bạn tham khảo đoạn code lấy tọa độ người truy cập:
 Ví dụ 1: Tìm vĩ độ và kinh độ trên bản đồ
 

<!DOCTYPE html>
<html>
<body>
<h1>Lập trình lấy vị trí tọa độ người truy cập web</h1>

<button onclick="getLocation()">Xác định vị trí</button>

<p id="demo"></p>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Vĩ độ: " + position.coords.latitude +
  "<br>Kinh độ: " + position.coords.longitude;
}
</script>

</body>
</html>

 

Ví dụ 2: Google Map kết hợp với lấy tọa độ

 



Xem tiếp video phần 2 giải thích code bên dưới

 <!doctype html>
<html >
  <head>
    <title>Xác định vị trí người truy cập web</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>    
    <style>#map {  height: 100%;}html,body {  height: 100%;  margin: 0;  padding: 0;}</style>
  </head>
  <body>
    <h1>Tìm vị trí người truy cập web</h1>
    <button style="font-size:1.5em;background-color:red;color: white;" onclick="laytoado()">Click tìm vị trí của tôi</button>   
    <div id="map"></div>   
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly&language=vi&region=EG"
      defer>
    </script>   
  </body>
   <script>
    ViDo=0;
    KinhDo=0;
    TyLeXem=2;
    TimDenViTri=false;
    
function initMap() {

  const toado = { lat: ViDo, lng: KinhDo };
  const map = new google.maps.Map(document.getElementById("map"), {
    scaleControl: true,
    center: toado,
    zoom: TyLeXem,
  });
  if(TimDenViTri)
  {
      const infowindow = new google.maps.InfoWindow();
      infowindow.setContent("<b>Tôi đang ở đây !</b>");
      const marker = new google.maps.Marker({ map, position: toado });
      marker.addListener("click", () => {
        infowindow.open(map, marker);
      });
  }
}

const options = {
  enableHighAccuracy: true,
  timeout: 3000,
  maximumAge: 0,
};

function success(pos) {
    const crd = pos.coords;
    ViDo=crd.latitude ;
    KinhDo=crd.longitude;
    TyLeXem=16;
    TimDenViTri=true;
    alert("Đã tìm ra vị trí của bạn\n* Vĩ độ: "+ViDo+"\n* kinh độ: "+KinhDo);     //More or less ${crd.accuracy} meters
    initMap();     
}
function error(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
}

function laytoado()
{
    navigator.geolocation.getCurrentPosition(success, error, options);
}
    </script>
</html>


Cảm ơn đã xem, đã có 388 lượt xem.
Thông báo:

Học lập trình vba excel

Thủ thuật máy tính khác
Tag tìm kiếm:

cach lap trinh xac dinh vi tri cua nguoi truy cap web

Thông tin liên hệ

Zalo 0935 999617

Zalo 0972 13 14 19