Hiển thị Google Map phía máy khách bằng Javascript là một nhiệm vụ đơn giản. Trong hướng dẫn này, chúng ta sẽ xem cách lấy vị trí hiện tại của người dùng. Trong ví dụ này, tôi đã sử dụng Google Map Javascript API để hiển thị bản đồ và lấy vị trí hiện tại của người dùng
Tôi đã tạo khóa Google API được sử dụng để truy cập Google Map Javascript API để yêu cầu. Trong hướng dẫn trước, chúng ta đã biết cách tạo khóa Google API để truy cập Google API nhằm xác thực người dùng qua Google OAuth
Ban đầu, tôi hiển thị bản đồ trong HTML DIV bằng cách đặt các tùy chọn mặc định như tọa độ vị trí ban đầu và mức thu phóng của bản đồ. Trong ví dụ này, tôi có một nút để gọi hàm javascript yêu cầu vị trí hiện tại trong sự kiện nhấp chuột
Sau khi nhận được kết quả, vị trí hiện tại được hiển thị với các chi tiết kinh độ và vĩ độ hiện tại bằng cửa sổ thông tin Google Map
Cảnh báo. Việc truy cập API Javascript của Google Map từ nguồn gốc không phải http không được dùng nữa. Vì vậy, bạn cần nguồn gốc https
Ảnh chụp màn hình sau đây hiển thị vị trí hiện tại của người dùng bằng cách hiển thị tọa độ Vĩ độ và kinh độ với cửa sổ thông tin Google Map
HTML cho Trình xử lý yêu cầu bản đồ
Mã này hiển thị HTML cho bộ chứa Bản đồ và trình xử lý nút được sử dụng để kích hoạt chức năng JavaScript để nhận vị trí hiện tại
How to Get Current Location using Google Map Javascript API
My Current Location
Và các phong cách là
Yêu cầu tài nguyên Bản đồ và Vẽ vị trí hiện tại bằng Javascript
Trong Javascript sau, tôi đã xác định chức năng gọi lại để lấy tài nguyên Google Map. Tôi đã chỉ định tên gọi lại trong khi truy cập Google Map Javascript API với tham chiếu của khóa API
Trong tập lệnh này, tôi cũng đã tạo một chức năng để lấy vị trí hiện tại khi nhấp vào nút “Vị trí hiện tại của tôi” trong giao diện người dùng. Chức năng này tạo ra nội dung được hiển thị trong cửa sổ thông tin để hiển thị tọa độ kinh độ và vĩ độ của Vị trí hiện tại
Ghi chú. Kể từ Chrome 50, API vị trí địa lý sẽ chỉ hoạt động trên các ngữ cảnh bảo mật như HTTPS. Nếu trang web của bạn được lưu trữ trên một nguồn gốc không an toàn [chẳng hạn như HTTP], các yêu cầu lấy vị trí của người dùng sẽ không còn hoạt động
Sử dụng định vị địa lý HTML
Phương thức getCurrentPosition[]
được sử dụng để trả về vị trí của người dùng
Ví dụ dưới đây trả về vĩ độ và kinh độ của vị trí của người dùng
Thí dụ
Tự mình thử »Ví dụ giải thích
- Kiểm tra xem Định vị địa lý có được hỗ trợ không
- Nếu được hỗ trợ, hãy chạy phương thức getCurrentPosition[]. Nếu không, hiển thị thông báo cho người dùng
- Nếu phương thức getCurrentPosition[] thành công, nó sẽ trả về một đối tượng tọa độ cho hàm được chỉ định trong tham số [showPosition]
- Hàm showPosition[] xuất Vĩ độ và Kinh độ
Ví dụ trên là tập lệnh Định vị địa lý rất cơ bản, không xử lý lỗi
Xử lý lỗi và từ chối
Tham số thứ hai của phương thức getCurrentPosition[]
được sử dụng để xử lý lỗi. Nó chỉ định một chức năng để chạy nếu nó không lấy được vị trí của người dùng
Thí dụ
function showError[error] {
switch[error. mã] {
trường hợp lỗi. PERMISSION_DENIED.
x. innerHTML = "Người dùng đã từ chối yêu cầu Định vị địa lý. "
hỏng;
lỗi trường hợp. VỊ TRÍ_KHÔNG CÓ SẴN.
x. innerHTML = "Không có thông tin vị trí. "
hỏng;
lỗi trường hợp. HẾT GIỜ.
x. innerHTML = "Yêu cầu lấy vị trí người dùng đã hết thời gian chờ. "
hỏng;
trường hợp lỗi. LỖI KHÔNG THỂ NHẬN BIẾT.
x. innerHTML = "Đã xảy ra lỗi không xác định. "
break;
}
}
Thông tin cụ thể về vị trí
Trang này đã trình bày cách hiển thị vị trí của người dùng trên bản đồ
Vị trí địa lý cũng rất hữu ích cho thông tin cụ thể về vị trí, như
- Cập nhật thông tin địa phương
- Hiển thị Điểm ưa thích gần người dùng
- Điều hướng từng chặng [GPS]
Phương thức getCurrentPosition[] - Trả về dữ liệu
Phương thức getCurrentPosition[]
trả về một đối tượng khi thành công. Các thuộc tính vĩ độ, kinh độ và độ chính xác luôn được trả về. Các thuộc tính khác được trả lại nếu có
Đối tượng định vị địa lý - Các phương pháp thú vị khác
Đối tượng Geolocation còn có các phương thức thú vị khác
watchPosition[]
- Trả về vị trí hiện tại của người dùng và tiếp tục trả về vị trí đã cập nhật khi người dùng di chuyển [như GPS trên ô tô]clearWatch[]
- Dừng phương thứcwatchPosition[]
Ví dụ dưới đây cho thấy phương pháp watchPosition[]
. Bạn cần một thiết bị GPS chính xác để kiểm tra điều này [như điện thoại thông minh]