Trang chủ Lập trình Javascript - HTML Viết tính năng xác định vị trí của bạn trên Google Maps...

Viết tính năng xác định vị trí của bạn trên Google Maps bằng Javascript

Lâu quá không viết bài chia sẻ về lập trình nên cũng tranh thủ viết một bài chia sẻ với mọi người. Bài viết hôm nay mình xin chia sẻ cách xây dựng tính năng cho phép hiển thị chính xác vị trí địa chỉ trên bản đồ của người dùng (trên Google Maps) thông qua IP đang sử dụng.

Như chúng ta đã biết là Google Maps sẽ hỗ trợ hiển thị vị trí thông qua kinh độ và vĩ độ. Vì vậy yêu cầu của ta sẽ được đáp ứng nếu ta tìm được vị trí địa lý chính xác của IP đang sử dụng. Và việc này thì hoàn toàn dễ dàng thông qua một dịch vụ hỗ trợ lấy thông tin IP.

google maps

Ở đây ta sẽ sử dụng dịch vụ lấy thông tin từ địa chỉ IP của GeoPlugin.Net đây là đoạn mã cụ thể:

Trên đây là hàm chính cũng là hàm duy nhất để lấy thông tin và tạo bản bồ. Bạn chú ý là bản đồ sẽ được tự động khởi tạo từ thẻ có ID là map_canvas. Vì vậy bạn cần tạo 1 thẻ bất kỳ tại vị trì cần chèn bản đồ và đặt ID của nó là: map_canvas.

Giờ đây để sử dụng bạn chỉ cần gọi là hàm đã khởi tạo là được.

Chú ý là để sử dụng ta phải chèn thư viên jQuery (https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js) và các hàm API của Google Maps (https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places) mới có thể sử dụng được nhé.

Các bạn có thể xem trang web mẫu tại đây.

Nếu các bạn có thắc mắc tại sao nó hiển thị thông tin không thật chính xác vị trí của mình. Mình xin giải thích là do IP bạn đang sử dụng là dạng IP động được cung cấp bởi nhà quản lý dịch vụ mạng nên thông tin được lưu trữ sẽ là thông tin nhà cung cấp dịch vụ nên kết quả hiển thị sẽ là vị trí của nhà cung cấp. Nếu có dịp mình sẽ hướng dẫn bạn cách xác định thông tin chính xác hơn với sự hỗ trợ của các dịch vụ khác.

Chúc các bạn thành công.

Huỳnh Mai Anh Kiệt

Huỳnh Mai Anh Kiệthttps://www.mangbinhdinh.vn
Anh là một người đam mê công nghệ. Hiện tại anh là một lập trình viên tại Quy Nhơn.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

- Advertisment -
Shopify

BÀI VIẾT MỚI

Kiểm tra trình duyệt của khách có phải là Safari bằng PHP

Hôm rồi chợt nhận ra điều là Safari của Apple chưa hỗ trợ hiển thị ảnh WebP. Vậy là cái plugin Hura Apps Photos...

GitHub mua lại nền tảng npm

npm là đóng một phần quan trọng trong cộng đồng JavaScript. Cộng đồng npm trong 10 năm qua là sự đóng góp của hàng...

Youtube cho phép quảng cáo trên video có nội dung liên quan đến Covid-19

Trong một bài đăng trên blog, CEO Susan Wojcicki cho biết YouTube sẽ bắt đầu cho phép chạy quảng cáo trên các video thảo...

Kiểm tra khả năng bị lây nhiễm Covid-19 của bạn bằng trí tuệ nhân tạo

Trong bối cảnh Covid-19 đang lan rộng và khả năng lây nhiễm rất cao khi ta vô tình tiếp xúc với các người bị...

10 lời đồn sai về Covid-19

1. Ai nhiễm Covid-19 sẽ chết - Tỉ lệ tử vong hiện nay khoảng 3.4%. Người càng lớn tuổi tỉ lệ tử vong sẽ cao...

BẠN XEM CHƯA

Gạ tình

Ai bán cho tôi một mảnh tình, Để tôi thay vải, may áo xinh.. Để tôi khỏi lạnh khi đông đến, Để tôi được thấy nắng lung...

Kaspersky Cleaner – Ứng dụng mới giúp dọn dẹp hệ thống của Kaspersky

Kaspersky đã quá quen thuộc với người dùng với những sản phẩm phần mềm diệt virus của hãng. Và mới đây Kaspersky vừa mới...

DPC Latency Checker kiểm tra khả năng xử lý của hệ thống

DPC Latency Checker là phần mềm tiện ích giúp bạn phân tích, đánh giá khả năng làm việc của hệ thống khi xử lý...

Hacker trộm $11000 từ ngân hàng và tặng cho lực lượng chống IS

Hacker mang tên Phineas Fisher tiết lộ trên Reddit hôm thứ tư rằng người này đã tấn công một ngân hàng để thực hiện...

Tương tác trên màn hình rộng của Youtube

Trước đây khi xem video trên Youtube ở chế độ đầy màn hình (full screen), bạn không thể tuỳ chọn các video...