HTML5 Xác định vị trí bằng website

HTML5 Xác định vị trí bằng website

Sử dụng công nghệ html5 + google map ta sẽ xác định được vị trí của người  đang truy cập sử dụng website

để chạy test xem code bên dưới chạy ra sao ta có thể truy cập vào đây.

source html5 :





<!DOCTYPE html>
<html>
<body>

<p id="demo">Click vào bên dưới để lấy vị trí.</p>

<button onclick="getLocation()">Try It</button>

<div id="mapholder"></div>

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

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

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
</script>

</body>
</html>


0 Comment "HTML5 Xác định vị trí bằng website"

Đăng nhận xét

Bạn có thể test thử trên Test Html Editor Chọn> Mã màu