Thứ Hai, 23 tháng 12, 2013

HTML5 Định vị





Người sử dụng bị từ chối yêu cầu Định vị.

Xác định vị trí vị trí người dùng

HTML5 Geolocation API được sử dụng để có được vị trí địa lý của người dùng.
Vì điều này có thể thỏa hiệp sự riêng tư của người sử dụng, vị trí không có sẵn trừ khi người dùng chấp thuận.

Hỗ trợ trình duyệt

Internet Explorer Firefox Opera Google Chrome Safari
Internet Explorer 9 +, Firefox, Chrome, Safari và Opera hỗ trợ Định vị.
Lưu ý: Định vị là chính xác hơn nhiều cho các thiết bị GPS, giống như iPhone.

HTML5 - Sử dụng Định vị

Sử dụng getCurrentPosition () để có được vị trí của người dùng.
Ví dụ dưới đây là một ví dụ đơn giản Định vị trở về vĩ độ và kinh độ của vị trí của người sử dụng:

Ví dụ

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>
var 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="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
  }
</script>
</body>
</html>

Thử nó cho mình »

Ví dụ giải thích:
  • Kiểm tra xem Định vị được hỗ trợ
  • Nếu được hỗ trợ, chạy getCurrentPosition () phương pháp. Nếu không, hiển thị một thông điệp tới người sử dụng
  • Nếu getCurrentPosition () là phương pháp thành công, nó sẽ trả về một tọa độ phản đối các chức năng quy định trong tham số (showPosition)
  • Các showPosition () chức năng được hiển thị Latitude và kinh độ
Ví dụ trên là một kịch bản Định vị rất cơ bản, không có xử lý lỗi.

Lỗi xử lý và bị từ chối

Tham số thứ hai của getCurrentPosition () phương pháp được sử dụng để xử lý các lỗi. Nó chỉ định một chức năng để chạy nếu nó không thành công để có được vị trí của người sử dụng:

Ví dụ

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<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)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
  }
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>

Thử nó cho mình »

Mã lỗi:
  • Cho phép từ chối - Người sử dụng đã không cho phép Định vị
  • Vị trí không có sẵn - Không thể để có được vị trí hiện tại
  • Thời gian chờ - Hết giờ thao tác

Hiển thị các kết quả trong một bản đồ

Để hiển thị kết quả trong một bản đồ, bạn cần truy cập vào một dịch vụ bản đồ có thể sử dụng vĩ độ và kinh độ, như Google Maps:

Ví dụ

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your position:</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>

Thử nó cho mình »
Trong ví dụ trên, chúng tôi sử dụng các vĩ độ trở lại và dữ liệu kinh độ để hiển thị vị trí trong một bản đồ Google (sử dụng một hình ảnh tĩnh).

Làm thế nào để sử dụng một kịch bản để hiển thị một bản đồ tương tác với một điểm đánh dấu, zoom và các tùy chọn kéo.

Thông tin địa điểm cụ thể

Trang này đã chứng minh làm thế nào để hiển thị vị trí của người dùng trên bản đồ. Tuy nhiên, Định vị cũng rất hữu ích cho các thông tin vị trí cụ thể.
Ví dụ:
  • Up-to-date thông tin địa phương
  • Cho thấy điểm-of-lãi suất gần người sử dụng
  • Turn-by-turn hướng (GPS)

Các getCurrentPosition () Phương pháp - Quay lại dữ liệu

Phương pháp getCurrentPosition () trả về một đối tượng nếu nó là thành công. Các tính chất vĩ độ, kinh độ và độ chính xác luôn luôn quay trở lại. Các tài sản khác dưới đây được trả về nếu có.
PropertyDescription
coords.latitudeThe latitude as a decimal number
coords.longitudeThe longitude as a decimal number
coords.accuracyThe accuracy of position
coords.altitudeThe altitude in meters above the mean sea level
coords.altitudeAccuracyThe altitude accuracy of position
coords.headingThe heading as degrees clockwise from North
coords.speedThe speed in meters per second
timestampThe date/time of the response

Đối tượng định vị - phương pháp thú vị khác

watchPosition () - Trả về vị trí hiện tại của người sử dụng và tiếp tục quay trở lại vị trí cập nhật như người dùng di chuyển (như GPS trong xe hơi).
clearWatch () - Dừng () phương pháp watchPosition.

Ví dụ dưới đây cho thấy watchPosition () phương pháp. Bạn cần một thiết bị GPS chính xác để kiểm tra này (như iPhone):

Ví dụ

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
  }
</script>
</body>
</html>

Thử nó cho mình »
Người đăng: vào lúc
Nhãn: ,
Các tin khác

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)