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

Shopify ra mắt trang web chính thức cho thị trường Việt Nam

Shopify là nền tảng thương mại điện tử cho phép dễ dàng tạo ra các trang web bán hàng online cho do doanh nghiệp...

Jeff Bezos sẽ rời vị trí CEO của Amazon

Theo một thông báo mới đây từ Amazon, Jeff Bezos, người sáng lập và là CEO của gã khổng lồ này trong gần 30...

Free Fire hợp tác cùng Sơn Tùng M-TP ra mắt dự án Skyler

Free Fire là tựa game bắn súng sinh tồn nổi tiếng bậc nhất trên nền tảng di động. Sau hơn 3 năm phát hành,...

Lấy một số ngẫu nhiên với Shopify Liquid

Shopify Liquid rất hạn chế nên đôi khi có những yêu cầu tưởng chừng đơn giản nhưng lại không biết code như thế nào....

Hướng dẫn tạo ảnh hoạt hình từ ảnh thật với ToonMe

Bạn có tò mò muốn biết bản thân mình sẽ như thế nào khi trong vai một nhân vật hoạt hình không? Không cần...

BẠN XEM CHƯA

Cách nhanh nhất để xem lại các tập tin đã mở

Trong máy tính chạy hệ điều hành Windows 10, có một cách để bạn nhanh chóng xem lại hoặc tìm lại những tập tin...

Xử lý văn bản có nhiều đường 2 gạch chân

Nếu bạn đang dùng bộ MS Word 2016 hoặc Word trong bộ Microsoft Office 365 thì có thể sẽ bắt gặp những đường 2...

Verizon sẽ mua lại Yahoo với giá 5 tỷ đô la

Mới đây trên một bài báo được đăng tải trên Bloomberg thông tin rằng Yahoo sẽ được bán cho công ty truyền thông Verizon...

Tôi đi học

Hằng năm cứ vào cuối thu, lá ngoài đường rụng nhiều và trên không có những đám mây bàng bạc, lòng tôi lại nao...

Vịt quay Bắc Kinh Quy Nhơn

Vịt quay Bắc kinh là một món ăn mà tiếng tăm của nó đã vượt qua biên giới Trung Quốc, được cả thế giới...