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®ion=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>