Cách sử dụng API vị trí địa lý

Sử dụng API vị trí địa lý, chúng tôi có thể yêu cầu trình duyệt cung cấp tọa độ vị trí của người dùng

Trình duyệt cho thấy mộtnavigator.geolocationđối tượng, qua đó chúng tôi sẽ thực hiện tất cả các hoạt động định vị địa lý.

Nó chỉ khả dụng trên các trang được phân phát bằng HTTPS, vì mục đích bảo mật và nó có sẵn trên tất cả các trình duyệt hiện đại.

navigator.geolocation

The geolocation object

Từwindowlà đối tượng toàn cục, chúng ta có thể truy cậpnavigatormà không chỉ địnhwindow.navigator

Cácwindow.navigatorthuộc tính được trình duyệt hiển thị trỏ đến mộtĐối tượng điều hướngmà là mộtvật chứađiều đó cung cấp cho chúng tôi rất nhiều API nền tảng web.

Cácgeolocationđối tượng cung cấp các phương thức sau:

  • getCurrentPosition()
  • watchPosition()
  • clearWatch()

Cái đầu tiên được sử dụng để lấy tọa độ vị trí hiện tại. Khi chúng tôi gọi phương thức này lần đầu tiên, trình duyệt sẽ tự động yêu cầu người dùng cho phép chia sẻ thông tin này với chúng tôi.

Đây là giao diện này trông như thế nào trong Chrome:

The permission screen in Chrome

trên Firefox:

The permission screen in Firefox

và trên Safari:

The permission screen in Safari

Điều này chỉ cần được thực hiện một lần cho mỗi điểm gốc. Bạn có thể thay đổi quyết định mình đã đưa ra và hoàn nguyên quyết định cấp phép. Đây là cách bạn thực hiện với Chrome bằng cách nhấp vào biểu tượng khóa gần miền:

Permission details

Sau khi quyền này được cấp, chúng tôi có thể tiếp tục.

Có được vị trí của người dùng

Hãy bắt đầu với mã mẫu này:

navigator.geolocation.getCurrentPosition(() => {})

Bảng quyền sẽ xuất hiện. Cho phép sự cho phép.

Chú ý cách tôi vượt qua một ô trốnghàm mũi tên, bởi vì hàm muốn một hàm gọi lại.

Hàm này được thông qua mộtPositionđối tượng, chứa vị trí thực tế:

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
})

Đối tượng này có 2 thuộc tính:

CácCoordinatesđối tượng đi kèm với một số thuộc tính xác định vị trí:

  • accuracyđộ chính xác của vị trí được đo, tính bằng mét
  • altitudegiá trị độ cao đo được
  • altitudeAccuracyđộ chính xác của độ cao đo được, tính bằng mét
  • headinghướng mà thiết bị đang di chuyển. Được biểu thị bằng độ (0 = Bắc, Đông = 90, Nam = 180, Tây = 270)
  • latitudegiá trị vĩ độ đo được
  • longitudegiá trị kinh độ đo được
  • speedtốc độ mà thiết bị đang di chuyển, được biểu thị bằng mét trên giây

Tùy thuộc vào cách triển khai và thiết bị, một số trong số đó sẽnull. Ví dụ: trên Chrome chạy trên MacBook Air của tôi, tôi chỉ nhận được các giá trị choaccuracy,latitudevàlongitude.

navigator.geolocation.getCurrentPosition(position => {
  console.log(position.coords.latitude)
  console.log(position.coords.longitude)
})

Xem vị trí để thay đổi

Ngoài việc có được vị trí người dùng một lần, bạn có thể thực hiện điều này bằng cách sử dụnggetCurrentPosition(), bạn có thể dùngwatchPosition()phương pháp củanavigator.geolocationđể đăng ký một chức năng gọi lại sẽ được gọi theo mỗi và mọi thay đổi mà thiết bị sẽ giao tiếp với chúng tôi.

Sử dụng:

navigator.geolocation.watchPosition(position => {
	console.log(position)
})

Tất nhiên trình duyệt cũng sẽ yêu cầu quyền với phương pháp này, nếu nó chưa được cấp.

Chúng ta có thể ngừng theo dõi một vị trí bằng cách gọinavigator.geolocation.clearWatch()phương pháp, chuyển nóidtrả lại bởiwatchPosition():

const id = navigator.geolocation.watchPosition(position => {
	console.log(position)
})

//stop watching after 10 seconds
setTimeout(() => {
navigator.geolocation.clearWatch(id)
}, 10 * 1000)

Nếu người dùng từ chối quyền

Hãy nhớ cửa sổ bật lên quyền mà trình duyệt hiển thị khi chúng ta gọi một trong các phương thức để có được vị trí?

Nếu người dùng từ chối điều đó, chúng tôi có thể chặn trường hợp này bằng cách thêm một hàm xử lý lỗi, làm tham số thứ hai cho các phương thứcgetCurrentPosition()vàwatchPosition().

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
})

Đối tượng được truyền cho tham số thứ hai chứacodethuộc tính để phân biệt giữa các loại lỗi:

  • 1có nghĩa là sự cho phép bị từ chối
  • 2có nghĩa là vị trí không có sẵn
  • 3nghĩa là hết thời gian

Thêm các tùy chọn khác

Khi tôi nói về các lỗi trước đây, tôi đã đề cập đến lỗi thời gian chờ. Việc tra cứu vị trí có thể mất một chút thời gian và chúng tôi có thể đặt thời gian tối đa được phép để thực hiện thao tác, như một tùy chọn.

Bạn có thể thêm thời gian chờ bằng cách thêm tham số thứ ba vào các phương thứcgetCurrentPosition()vàwatchPosition(), một đối tượng.

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
}, {

})

Bên trong đối tượng này, chúng ta có thể truyền các thuộc tính

  • timeoutđể đặt số mili giây trước khi yêu cầu bị lỗi
  • maximumAgeđể đặt “tuổi” tối đa của vị trí được trình duyệt lưu trong bộ nhớ cache. Chúng tôi không chấp nhận một cái cũ hơn số mili giây đã đặt
  • enableHighAccuracymột boolean theo mặc địnhfalse, yêu cầu một vị trí với mức độ chính xác cao nhất có thể (có thể mất nhiều thời gian hơn và nhiều năng lượng hơn)

Ví dụ sử dụng:

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
}, {
  timeout: 1000,
  maximumAge: 10000,
  enableHighAccuracy: true
})

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn khác về trình duyệt:


Công nghệ Wiki trực tuyến!