Bài viết này mình sẽ tiếp tục hướng dẫn cho các bạn sử dụng google maps API để làm những tính năng hay ho hơn.

Các chức năng mình sẽ giới thiệu trong bài này đó là:

  • Chỉ đường giữa 2 điểm
  • Vẽ đường tròn trong google maps
  • Lấy vị trí hiện tại

Hướng dẫn chức năng chỉ đường, vẽ đường tròn, get vị trí hiện tại trong google maps API

Các bạn chú ý, trước khi xem bài viết này các bạn vui lòng xem bài viết: Hiển thị marker google maps để hiểu hơn cách thức sử dụng google maps API và những điều cần thiết để google maps api hiển thị được trên website nhé.

Đây là đoạn code của bài trước, ở bài hôm này chúng ta tiếp tục sử dụng đoạn code này và bổ sung một số thành phần mới!

Hướng dẫn chức năng chỉ đường trong google maps API

Các bạn chèn đoạn này vào thẻ script nhé: 

Đoạn code này mình viết thành một cái hàm chỉ đường: dogetRedirect_map(position, roomLatlng);

  • position Là tọa độ điểm xuất phát
  • roomLatlng là tọa độ điểm đên

Để xóa chỉ đường chúng ta dùng đoạn code sau:

Các bạn chỉ viết chạy hàm: remove_dogetRedirect_map(); khi cần xóa chỉ đường

Hướng dẫn vẽ đường tròn với một bán kính cho trước trong google map API

Các bạn tiếp tục chèn đoạn code sau vào thẻ script nhé:

Trên đây là đoạn code vẻ đường tròn, ví dụ: Mình muốn vễ đường tron tâm A bán kình 3km. Thì mình phải gọi hàm như sau.

Trong đó:

  • 16.0720611 là LAT của điểm A
  • 108.2315575 là LNG của điểm A
  • 3000 tương ứng với 3km

Để xóa đường tròn đang hiển thị trong map chúng ta đùng đoạn code sau

Để xóa đường trong khi cần thiết bạn chỉ cần chạy hàm: RemoveCircle();

Hướng dẫn lấy vị trí hiện tại sử dụng google maps API

Để lấy được vị trí hiện tại các bạn chạy hàm getLocation();

  • Trong hàm showPosition bạn có thể xử lý để add marker hoặc hiển thị tọa độ ra ngoài…

** Chú ý

  • Để lấy được vị trí hiện tại thì web của bạn phải có ssl (HTTPS) nhé. 
  • Khi chạy hàm này trình duyệt sẽ hiện thông báo yêu cầu cấp phép cho lấy tọa độ. Người dùng phải cho phép thì nó mới lấy được vị trí hiện tại của bạn.
  • Tọa độ lấy bằng trình duyệt sẽ không chính xác (hình như nó lấy vị trí theo nhà mạng). Vì vậy phương pháp này chỉ là đương đối nhé 🙂
  • Nếu muốn lấy chính xác phải dùng GPS trên các thiết bị mobile.

Hàm tính khoảng cách giữa 2 tọa độ trên google maps

Tóm lại:

Bài viết này mình đã hướng dẫn cho các bạn cách tạo chỉ đường, tạo đường tròn và get vị trí hiện tại trong google maps API. Hy vọng những kiến thức này sẽ giúp ích cho những dự án web của các bạn trong tương lai.

Nếu các bạn mong muốn hướng dẫn nhưng chức năng nào nữa trong google maps API thì hãy cmt phía dưới mình sẽ tìm hiểu và hướng dẫn.

Cùng chủ đề:

Chào thân ái và quyết thắng!

Huy Kira

Đam mê hóa học, ưng thi vào trường kinh tế... Đậu vào trường Sư phạm, quyết tâm đi dạy... Ra trường đi làm designer, tự học frontend, chuyển qua làm PHP, được công ty đào tạo laravel... Và hiện tại đang code react native... 😂😂 tối về viết blog... (Còn tiếp...)

1
  • Ngọc TrangE đang cần làm chức năng map có hnhf xe hiển thị cả hình xe đạp nữa. Mong anh chỉ giúp ạ

    Thích Trả lời 5 tháng trước

AVT