TÌM HIỂU GOOGLE MAP API VÀ XÂY DỰNG ỨNG DỤNG HỖ TRỢ ĐỊNH VỊ TÌM KIẾM VÀ CHỈ ĐƯỜNG - Full 10 điểm

UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA CÔNG NGHỆ THÔNG TIN -----  ----- NGUYỄN VĂN TIẾN TÌM HIỂU GOOGLE MAP API VÀ XÂY DỰNG ỨNG DỤNG HỖ TRỢ ĐỊNH VỊ TÌM KIẾM VÀ CHỈ ĐƯỜNG KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC Quảng Nam, tháng 05 năm 2019 UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA CÔNG NGHỆ THÔNG TIN -----  ----- KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC Đề tài: TÌM HIỂU GOOGLE MAP API VÀ XÂY DỰNG ỨNG DỤNG HỖ TRỢ ĐỊNH VỊ TÌM KIẾM VÀ CHỈ ĐƯỜNG Sinh viên thực hiện : NGUYỄN VĂN TIẾN MSSV :2115021049 NGÀNH: CÔNG NGHỆ THÔNG TIN Khóa học: 2015-2019 Cán bộ hướng dẫn: ThS TRẦN THỊ DIỆU LINH MSCB: ………… Quảng Nam, tháng 05 năm 2019 LỜI MỞ ĐẦU Hiện nay, dưới sự phát triển của công nghệ thông tin, đặc biệt là trong lĩnh vực thương mại điện tử đã giúp các cá nhân, doanh nghiệp và mọi người dễ dàng tiếp cận được với thế giới bên ngoài Việc tiếp cận với thế giới sẽ trở nên đơn giản hơn nêu có được bản đồ trong tay và tùy chỉnh nó Em đã chọn đề tài: “Ứng đụng Google Map API xây dựng ứng dụng định vị, tìm kiếm và chỉ đường” làm đề tài khóa luận của mình Thực hiện bài khóa luận là cơ hội để em áp dụng, tổng hợp các kiến thức đã học trên lớp, đồng thời đúc kết được những bài học thực tế phục vụ cho việc học tập và làm việc sau này Mặt dù đã cố gắng thực hiện đề tài nhưng vì năng lực cũng như thời gian còn hạn chế nên bài khóa luận khó tránh khỏi những thiếu sót rất mong thầy cô thông cảm Những góp ý của thầy cô là bài học, là hành trang để em vững bước vào cuộc sống sau này Qua đây em xin cảm ơn cô Trần Thị Diệu Linh, người đã nhiệt tình hướng dẫn, chỉ bảo em trong quá trình thực hiện và hoàn thành bài khóa luận MỤC LỤC Phần 1 MỞ ĐẦU 1 1 1 Lý do chọn đề tài 1 1 2 Mục tiêu của đề tài 1 1 3 Đối tượng và phạm vi nghiên cứu 1 1 4 Phương pháp nghiên cứu 1 1 5 Lịch sử nghiên cứu 1 1 6 Đóng góp của đề tài 2 1 7 Cấu trúc đề tài 2 Phần 2: NỘI DUNG NGHIÊN CỨU 3 Chương 1: TỔNG QUAN GOOGLE MAP 3 1 1 KHÁI NIỆM VỀ GOOGLE MAP VÀ MAP API 3 1 2 ỨNG DỤNG GOOGLE MAP 3 1 3 MỘT SỐ SẢN PHẨM CỦA GOOGLE MAP 4 1 3 1 Bản đồ 4 1 3 2 Tuyến đường 6 1 3 3 Địa điểm 7 1 4 KHÁM PHÁ CÁC GIẢI PHÁP CÔNG NGHIỆP 9 1 4 1 Sở hữu đường 9 1 4 2 Biến thế giới thành sân chơi của bạn 10 1 4 3 Theo dõi tài sản của bạn trên toàn cầu 10 Chương 2: GOOGLE MAP API 12 2 1 SỬ DỤNG GOOGLE MAP API 12 2 1 1 Giới thiệu tổng quan 12 2 1 2 Đăng ký sử dụng Google map API 12 2 1 3 Load bản đồ về trang web cá nhân 13 2 1 4 Tạo một Google map đơn giản 15 2 2 TƯƠNG TÁC GIỮA SERVER APP VÀ GOOGLE SERVERS 16 2 3 MỘT SỐ ỨNG DỤNG CỦA GOOGLE MAP API 17 2 4 GOOGLE MAPS OVERLAYS (LỚP PHỦ) TRÊN BẢN ĐỒ 18 2 4 1 Khái niệm lớp phủ 18 2 4 2 Các loại lớp phủ 20 2 5 CÁC SỰ KIỆN CỦA GOOGLE MAP API 26 2 6 CÁC ĐIỀU KHIỂN CỦA GOOGLE MAP API 29 2 7 CÁC LOẠI CỦA GOOGLE MAP API 30 Chương 3: CHƯƠNG TRÌNH THỰC NGHIỆM 31 3 1 BÀI TOÁN 31 3 2 MỘT SỐ ĐOẠN CODE CÓ TRONG CHƯƠNG TRÌNH 31 3 3 MỘT SỐ CHỨC NANG CỦA CHƯƠNG TRINH 34 Phần 3 KẾT LUẬN VÀ KIẾN NGHỊ 36 1 Kết luận 36 2 Kiến nghị 36 Phần 4 TÀI LIỆU THAM KHẢO 37 DANH MỤC HÌNH ẢNH Hình 1 1: Bản đồ ở chế độ đường phố 4 Hình 1 2: Bản đồ tuyến đường 6 Hình 1 3: Bản đồ địa điểm 7 Hình 2 1: API Access 13 Hình 2 2: Javascript trong thẻ head 13 Hình 2 3: Hàm trong Javascript 13 Hình 2 4: Biến khởi tạo bản đồ 14 Hình 2 5: Mã trong Javascript 15 Hình 2 6: Tạo key 16 Hình 2 7: Sử dụng user’s credential 17 Hình 2 8: Mã Javascript 18 Hình 2 9: Lớp phủ Marker 19 Hình 2 10: Mảng chứa các lớp phủ 20 Hình 2 11: Markers 21 Hình 2 12: Markers 22 Hình 2 13: Hình ảnh kết quả của Markers 22 Hình 2 14: Lớp phủ của Polylines 23 Hình 2 15: Mã Javascript 24 Hình 2 16: Hình ảnh kết quả 24 Hình 2 17: Hình ảnh kết quả 25 Hình 2 18: Hình ảnh kết quả 25 Hình 2 19: Lớp phủ của Inforwindows 26 Hình 2 20: Marker 26 Hình 2 21: Đoạn mã sự kiện 27 Hình 2 22: sự kiện trên các đối tượng map 27 Hình 2 23: Các Markers trên bản đồ 28 Hình 2 24: Click vào Markers 28 Hình 3 1: Chức năng zoom 34 Hình 3 2: Chức năng Xem phố 35 Hình 3 3: Chức năng định vị 34 Hình 3 4: Chức năng tìm kiếm 35 Hình 3 5: Chức năng chỉ đường 35 1 Phần 1 MỞ ĐẦU 1 1 Lý do chọn đề tài - Trong thế giới hiện nay ngành công nghệ thông tin ngày càng phát triển vượt bậc, khoa học máy tính không ngừng vươn tới những tìm tòi mới mẽ hơn và ngày càng đạt được nhiều thành tựu to lớn trong việc phát triển kinh tế Trên hầu hết tất cả lĩnh vực thì ngành công nghệ thông tin đã trở thành một phần thiết yếu trong cuộc sống ngày càng góp phần thay đổi cuộc sống - Công nghệ ngày càng được dùng rất nhiều trong các công việc hằng ngày của mọi người Đối với việc tìm đường ngày càng trở nên dễ dàng hơn với các công nghệ hiện nay Nếu có địa chỉ rõ ràng thì mọi người dường nhưng không còn phải khó khăn như ngày xưa nữa, nhưng nếu như không có địa điểm rõ ràng như ở các vùng thôn quê thì việc tìm kiếm nhà hay địa điểm nào đó cũng khó đối với những người nơi khác tới Nên em quyết định chọn chủ đề Map API google và phần mềm ứng dụng 1 2 Mục tiêu của đề tài - Giới thiệu về Map API google - Xây dựng được phần mềm ứng dụng của Map API google 1 3 Đối tượng và phạm vi nghiên cứu - Đối tượng: MapAIP google, ngôn ngữ PHP, JavaScript, Jquery, CSS, HTML - Phạm vi nghiên cứu: Các nguồn tài liệu trên mạng và các trang chính của các đối tượng 1 4 Phương pháp nghiên cứu -Tìm kiếm và thu thập tài liệu - Nghiên cứu tài liệu thu thâp được - Phương pháp phân tích tổng kết kinh nghiệm 1 5 Lịch sử nghiên cứu Quá trình nghiên cứu về Map API google là phải tìm hiểu kỹ về lý thuyết rồi sau đó đi chuyên sau vào thực hành rồi áp dụng vào ứng dụng của mình 2 1 6 Đóng góp của đề tài Giúp cho mọi người hiểu thêm được về bản đồ và từ Map API google có thể áp dụng được để xây dựng cho mình bản đồ riêng với các tính năng tùy chỉnh theo ý của mình 1 7 Cấu trúc đề tài Cấu trúc của bài báo cáo khóa luận này bao gồm các phần: Lời cảm ơn, Mục lục, Phần mở đầu, Phần nội dung nghiên cứu, Phần kết luận và Phần tài liệu tham khảo Trong đó phần nội dung nghiên cứu sẽ gồm các nội dung chính như sau: - Chương 1: Tổng quan Google MAP - Chương 2: Google MAP API - Chương 3: Chương trình thực nghiệm 3 Phần 2: NỘI DUNG NGHIÊN CỨU Chương 1: TỔNG QUAN GOOGLE MAP 1 1 KHÁI NIỆM VỀ GOOGLE MAP VÀ MAP API Google Maps là một dịch vụ ứng dụng và công nghệ bản đồ trực tuyến trên web miễn phí được cung cấp bởi Google, hỗ trợ nhiều dịch vụ khác của Google nổi bật là dẫn đường Nó cho phép thấy bản đồ đường sá, đường đi cho xe đạp, cho người đi bộ và xe hơi, và những địa điểm kinh doanh trong khu vực cũng như khắp nơi trên thế giới Map API là một phương thức cho phép 1 website B sử dụng dịch vụ bản đồ của site A (gọi là Map API) và nhúng vào website của mình (site B) Site A ở đây là google map, site B là các web site cá nhân hoặc tổ chức muốn sử dụng dịch vụ của google, có thể rê chuột, zoom, đánh dấu trên bản đồ Các ứng dụng xây dựng trên bản đồ được nhúng vào trang web cá nhân thông qua các thẻ Javascript do vậy việc sử dụng API google rất dễ dàng Google Map API đã được nâng cấp lên phiên bản thứ 3 Phiên bản này hỗ trợ không chỉ cho các máy để bàn truyền thống mà cho cả các thiết bị di động Nhanh hơn và nhiều hơn các ứng dụng Điều quan trọng là các dịch vụ hoàn toàn miễn phí với việc xây dựng một ứng dụng nhỏ Trả phí nếu đó là việc sử dụng cho mục đích kinh doanh, doanh nghiệp 1 2 ỨNG DỤNG GOOGLE MAP Đánh dấu các địa điểm trên bản đồ cùng các thông tin cho địa điểm: các khu vui chơi giải trí, nhà hàng khách sạn, các quán ăn ngon, các shop quần áo, nữ trang Chỉ dẫn đường đến các địa điểm cần tìm,chỉ dẫn đường giao thông công cộng, có thể là các địa điểm cung cấp như trên Ở đây sử dụng các service google cung cấp Khoanh vùng khu vực: các trung tâm kinh tế, khu đô thị, khu ô nhiễm Tình trạng giao thông các khu vực Đưa ra các giải pháp có thể 4 Còn rất nhiều ứng dụng cho phép bạn xây dựng Quan trọng là đều mang lại lợi ích cho người cung cấp dịch vụ và người sử dụng dịch vụ Có thể đem lại lợi ích kinh tế nếu như ứng dụng áp dụng tốt trong thực tế! 1 3 MỘT SỐ SẢN PHẨM CỦA GOOGLE MAP 1 3 1 Bản đồ - Mang thế giới thực đến với người dùng của bạn bằng bản đồ tùy chỉnh và hình ảnh - Chế độ xem đường phố Hình 1 1: Bản đồ ở chế độ đường phố a Tính năng - Hình dung thế giới với bản đồ phong phú, chính xác: Giúp một cặp vợ chồng mới tìm thấy ngôi nhà hoàn hảo trong ứng dụng bất động sản của bạn Hoặc cung cấp cho khách du lịch một cái nhìn chi tiết về một nhà ga xe lửa xa lạ Bản đồ giúp bạn cung cấp cho người dùng bối cảnh họ cần với các bản đồ tĩnh hoặc tương tác được nhúng vào trang Web hoặc ứng dụng của bạn Chế độ xem phố và hình ảnh vệ tinh có độ phân giải cao cho phép bạn tạo ra nhiều trải nghiệm hấp dẫn hơn với chi tiết bổ sung Với hơn 25 triệu cập nhật từ hơn 1 000 nguồn mỗi ngày, bản đồ của chúng em có thông tin cập nhật mà người dùng của bạn cần, ngay khi họ cần - Tùy chỉnh bản đồ của bạn: Kiểu bản đồ của bạn với các điểm đánh dấu, đường, màu sắc, đa giác và hình ảnh tùy chỉnh Cung cấp cho người dùng khả năng tạo và chia sẻ bản đồ tùy chỉnh của riêng họ và sử dụng thu phóng, chụm, xoay và nghiêng để khám phá bản đồ chi tiết hơn Bạn có thể làm nổi bật vị trí cửa hàng của bạn với màu sắc và các yếu tố 5 tùy chỉnh Hoặc tùy chỉnh đường đi xe đạp ảo được cung cấp bởi chế độ xem phố với các điểm đánh dấu, lớp phủ và ảnh độc đáo - Dựa vào quy mô của Google khi bạn phát triển: Khi bạn xây dựng trên cùng một cơ sở hạ tầng phục vụ hàng tỷ người dùng Google Map, bạn có thể tin tưởng vào một nền tảng sẽ mở rộng và uốn cong như bạn làm Trên cơ sở hạ tầng an toàn, chứng minh trong tương lai, bạn có thể phát triển từ nguyên mẫu sang quy mô hành tinh mà không phải suy nghĩ về năng lực, độ tin cậy hoặc hiệu suất - Xây dựng bản đồ trải nghiệm trên toàn thế giới: Cung cấp cho người dùng của bạn những trải nghiệm Google Map chất lượng cao tương tự mà họ biết và yêu thích ở hơn 200 quốc gia và vùng lãnh thổ Cho dù bạn kinh doanh ở Louisiana hay Lào, đã giúp bạn có được dữ liệu toàn diện, đáng tin cậy b Đặt điểm - Hiển thị bản đồ dưới dạng hình ảnh hoặc bản đồ tương tác Tạo kiểu cho chúng bằng các dấu tùy chỉnh, đường kẻ, màu sắc, đa giác và hình ảnh để phù hợp với thương hiệu của bạn - Nhúng hình ảnh Chế độ xem phố và hình ảnh vệ tinh có độ phân giải cao c APIs và SDKs hỗ trợ bản đồ - Bản đồ SDK cho Android: Thêm bản đồ vào ứng dụng Android của bạn - Bản đồ SDK cho iOS: Thêm bản đồ vào ứng dụng iOS của bạn - API tĩnh của bản đồ: Thêm hình ảnh bản đồ đơn giản, có thể nhúng vào trang Web của bạn với mã tối thiểu - API JavaScript của bản đồ: Thêm một bản đồ tương tác vào trang Web của bạn Tùy chỉnh nó với nội dung và hình ảnh của riêng bạn - API tĩnh Chế độ xem phố: Nhúng hình ảnh trong thế giới thực với ảnh toàn cảnh 360 ° - URL bản đồ: Khởi chạy Google Map và bắt đầu một hành động, như tìm kiếm hoặc chỉ đường, bằng cách sử dụng lược đồ URL đa nền tảng - API nhúng bản đồ: Thêm bản đồ tương tác hoặc Chế độ xem phố Toàn cảnh trang Web của bạn, sử dụng đơn giản Yêu cầu HTTP 6 1 3 2 Tuyến đường Giúp người dùng của bạn tìm cách tốt nhất để đi từ A đến Z với dữ liệu toàn diện và lưu lượng truy cập thời gian thực Hình 1 2: Bản đồ tuyến đường a Tính năng - Cung cấp hướng dẫn đáng tin cậy bất cứ nơi nào trên thế giới: Giúp người dùng của bạn lên kế hoạch các tuyến đường chạy bộ ở London Hoặc tìm khách sạn gần điểm dừng chân tiếp theo của họ ở Jakarta Tuyến đường có toàn diện, up-to-date quá cảnh, đi xe đạp, lái xe và đi bộ bao gồm 40 triệu dặm đường tại hơn 200 quốc gia và vùng lãnh thổ Bất cứ nơi nào bạn làm kinh doanh, bạn có thể tin tưởng vào các tuyến đường toàn diện, đáng tin cậy - Tạo các tuyến hiệu quả để giảm chi phí và cải thiện trải nghiệm của khách hàng: Lập kế hoạch chuyến đi với dữ liệu cập nhật về khoảng cách giữa các điểm, tuyến đường được đề xuất và thời gian di chuyển ước tính Với khả năng tạo các tuyến hiệu quả cho tối đa 25 điểm, bạn có thể hợp lý hóa hệ thống phân phối, tạo hành trình tham quan cho khách du lịch hoặc hướng dẫn khách hàng thuê xe từ văn phòng của bạn đến khách sạn của họ - Giữ lực lượng lao động của bạn di chuyển, ngay cả trong giờ cao điểm: Chọn các tuyến nhanh hơn hoặc phân bổ lại giao hàng cho công nhân dựa trên các điều kiện giao thông thời gian thực Sử dụng các mô hình giao thông dự đoán để lên kế hoạch trước, giữ cho nhân viên của bạn tránh khỏi tình trạng chậm lại và giảm việc giao hàng trễ - Dựa vào quy mô của Google khi bạn phát triển: 7 Cho dù bạn đang mở rộng bán kính phân phối, lập kế hoạch tăng đột biến lưu lượng truy cập hoặc giúp người dùng tìm vị trí cửa hàng mới của mình, bạn có thể chắc chắn Nền tảng Google Map sẽ mở rộng quy mô như bạn Trên cơ sở hạ tầng an toàn, chứng minh trong tương lai của chúng em, bạn có thể phát triển từ nguyên mẫu sang quy mô hành tinh mà không phải suy nghĩ về năng lực, độ tin cậy hoặc hiệu suất b Đặt điểm - Nhận chỉ đường cho quá cảnh, đi xe đạp, lái xe và đi bộ Tính thời gian di chuyển hiện tại hoặc tương lai dựa trên lưu lượng truy cập thời gian thực - Cung cấp thời gian đi lại và khoảng cách cho một hoặc nhiều địa điểm - Tạo hành trình chính xác bằng cách xác định tuyến đường mà xe đã đi và những con đường gần nhất dọc theo mỗi điểm trên hành trình của phương tiện 1 3 3 Địa điểm Giúp người dùng khám phá thế giới với các chi tiết phong phú cho hơn 150 triệu điểm quan tâm Hình 1 3: Bản đồ địa điểm a Tính năng - Giúp người dùng của bạn khám phá thế giới xung quanh: Cung cấp cho người dùng của bạn thông tin họ cần để lên kế hoạch cho chuyến đi đến Tokyo hoặc chọn một nhà hàng ramen trong khu phố của họ Với Địa điểm, bạn có thể cung cấp dữ liệu cho người dùng về tên vị trí, địa chỉ, xếp hạng, đánh giá, thông tin liên hệ và bầu không khí Hướng dẫn và người dùng địa phương gửi hàng chục triệu cập nhật mỗi ngày, do đó bạn có thể tin tưởng vào thông tin chính xác, đáng tin cậy - Cung cấp dịch vụ tốt hơn với trí thông minh vị trí chính xác: 8 Tránh bỏ lỡ xe bán tải bằng cách gửi trình điều khiển của bạn đến địa chỉ chính xác dựa trên vị trí được báo cáo của người dùng Giúp người dùng dễ dàng nhập thông tin thanh toán và giao hàng chính xác bằng cách tự động đề xuất địa chỉ khi họ nhập Khi bạn sử dụng các tính năng định vị địa lý và mã hóa địa lý mạnh mẽ của chúng em kết hợp với dữ liệu Địa điểm cập nhật, bạn có thể cung cấp cho người dùng thông tin họ cần, ngay khi họ cần - Xây dựng với dữ liệu vị trí toàn diện trên toàn cầu Sử dụng chi tiết về hơn 150 triệu địa điểm và điểm ưa thích để giúp người dùng tìm thấy bạn, thu hút khách hàng bằng các đánh giá và thậm chí giúp phát hiện gian lận Cho dù bạn kinh doanh ở Barcelona hay Baltimore, bạn đều có thể tin tưởng vào những trải nghiệm Google Map chất lượng cao tương tự mà người dùng của bạn biết và yêu thích - Dựa vào quy mô của Google khi bạn phát triển Khi bạn xây dựng trên cùng một cơ sở hạ tầng phục vụ hàng tỷ người dùng Google Map, bạn có thể tin tưởng vào một nền tảng sẽ mở rộng và uốn cong như bạn làm Trên cơ sở hạ tầng an toàn, chứng minh trong tương lai của chúng em, bạn có thể phát triển từ nguyên mẫu sang quy mô hành tinh mà không phải suy nghĩ về năng lực, độ tin cậy hoặc hiệu suất b Đặc điểm - Cung cấp tên, địa chỉ và các chi tiết phong phú khác như xếp hạng, đánh giá hoặc thông tin liên hệ cho hơn 150 triệu địa điểm - Xác định một địa điểm dựa trên các tín hiệu thời gian thực như thời gian trong ngày hoặc vị trí người dùng - Biến số điện thoại, địa chỉ hoặc tên thành một địa điểm - Tự động trả lại đề xuất vị trí trong khi người dùng nhập - Chuyển đổi địa chỉ sang tọa độ địa lý hoặc ngược lại - Trả về vị trí chính xác của thiết bị dựa trên Wi-Fi hoặc tháp di động - Trả lại một múi giờ cho bất kỳ vị trí c API hỗ trợ các tuyến đường - API chỉ đường: Cung cấp chỉ đường cho quá cảnh, đi xe đạp, lái xe hoặc đi bộ giữa nhiều địa điểm 9 - API ma trận khoảng cách: Tính thời gian di chuyển và khoảng cách cho nhiều điểm đến - API đường: Xác định tuyến đường chính xác mà một chiếc xe đi 1 4 KHÁM PHÁ CÁC GIẢI PHÁP CÔNG NGHIỆP 1 4 1 Sở hữu đường - Giúp lái xe của bạn đi từ điểm A đến Z nhanh hơn và an toàn hơn: Cung cấp cho trình điều khiển của bạn trải nghiệm liền mạch bằng cách tích hợp điều hướng từng chặng được cung cấp bởi Google Map ngay vào ứng dụng của bạn Thay vì phải chuyển đổi qua lại giữa các ứng dụng, các tài xế kiểm soát hiệu quả hàng đợi của họ và xem tất cả thông tin hành khách ở một nơi, giúp quản lý hành trình và đến nơi họ đi sẽ dễ dàng hơn Người lái xe có thể dựa vào trải nghiệm Google Map mà họ đã từng sử dụng, bao gồm điều hướng từng chặng trực quan, tổng quan tuyến đường, hướng dẫn mức độ làn đường và hỗ trợ giọng nói Và bởi vì Google Map chạy lại dựa trên lưu lượng truy cập thời gian thực, người lái xe có thể hoàn thành các chuyến đi nhanh hơn và có nhiều chuyến đi hơn - Trao quyền cho khách hàng của bạn với thông tin chính xác, cập nhật: Mang lại trải nghiệm tuyệt vời cho khách hàng với thời gian chờ chính xác và các tuyến đường được tối ưu hóa dựa trên các điều kiện giao thông thời gian thực Nếu các trình điều khiển bị kẹt trong lưu lượng truy cập, thời gian chờ đợi sẽ được cập nhật tự động, giúp khách hàng thoải mái - Cải thiện hoạt động của bạn bằng cách tương tác với trình điều khiển trong thời gian thực: Khi trình điều khiển có thể ở trong ứng dụng của bạn khi họ điều hướng đến đích, bạn có thể gửi cho họ thông báo và thông báo, thêm chuyến đi nhanh chóng và có cái nhìn tổng thể hơn về hành vi điều hướng của họ Với nhiều dữ liệu hơn và kiểm soát tốt hơn, bạn có thể tối ưu hóa tài nguyên và tuyến đường, giảm thời gian nhàn rỗi cho tài xế, cải thiện thời gian chờ đợi cho khách hàng và tạo hiệu quả cho doanh nghiệp của bạn - Mang lại trải nghiệm tuyệt vời trên toàn cầu: Cho dù bạn đang mở rộng hoạt động trình chiếu của mình sang Úc hoặc triển khai dịch vụ xe hai bánh ở Ấn Độ, chúng em đã giúp bạn có được dữ liệu chi tiết, chất lượng cao cho các khu vực và thành phố trên toàn cầu Cung cấp cho người lái 10 xe và khách hàng của bạn trải nghiệm Google Map họ biết và tình yêu với các tuyến đường đó bao gồm 40 triệu dặm đường tại hơn 200 quốc gia và vùng lãnh thổ 1 4 2 Biến thế giới thành sân chơi của bạn - Tạo ra những trải nghiệm tuyệt vời trên toàn cầu: Truy cập hàng trăm triệu tòa nhà 3D, đường, cột mốc, quán cà phê và công viên để xây dựng trò chơi của bạn Chúng em có bản đồ thế giới, vì vậy bạn có thể tin tưởng vào dữ liệu chất lượng cao từ New York đến Tokyo, bao gồm thông tin về hơn 100 triệu địa điểm - Hoàn toàn tùy chỉnh các trò chơi của bạn: Đường, tòa nhà và công viên được biến thành các đối tượng trò chơi trong Unity, nơi bạn có thể tùy chỉnh bất kỳ yếu tố trò chơi nào Đổ đầy công viên bằng cây cối, đại dương bằng sóng và bãi biển bằng ô Tùy chỉnh màu sắc, kết cấu và kích thước của các đối tượng để tạo ra một trò chơi của riêng bạn - Thiết kế các trò chơi phong phú và hấp dẫn trong thế giới thực: Tìm những địa điểm phù hợp và thân thiện với người chơi để chơi trò chơi với dữ liệu Google Map Cho dù bạn muốn đưa người chơi của mình đến một quán cà phê đông đúc ở Paris hay ngoài đường bị đánh đập, chúng em có thể giúp bạn đưa người chơi của mình đến các địa điểm trong thế giới thực có ý nghĩa cho trò chơi của bạn - Dựa vào quy mô của Google khi bạn phát triển: Xây dựng với cơ sở hạ tầng và máy chủ Google Map trên toàn thế giới có nghĩa là thời gian phản hồi nhanh hơn, khả năng mở rộng theo yêu cầu và yên tâm rằng các trò chơi của bạn sẽ chỉ hoạt động Dựa vào lối chơi có sẵn trên toàn cầu cho hàng triệu người chơi đồng thời và trong khi lưu lượng truy cập tăng đột ngột - Xây dựng trong sự thống nhất: Tạo các trò chơi nhập vai tùy chỉnh với dữ liệu Google Map trong Unity, nền tảng trò chơi di động phổ biến nhất Tích hợp liền mạch cho phép các nhà phát triển của bạn tận dụng lợi thế của vật lý Unity, ánh sáng, AI, xử lý hậu kỳ và khả năng đa nền tảng để tạo ra các trò chơi sống động có thể được xuất sang bất kỳ thiết bị nào 1 4 3 Theo dõi tài sản của bạn trên toàn cầu Dữ liệu vị trí toàn cầu chính xác, theo thời gian thực cho các đội tàu, tài sản và thiết bị 11 - Tận dụng tốt nhất Bản đồ, Tuyến đường và Địa điểm để theo dõi tài sản: Có được sự hiểu biết sâu sắc về tài sản của bạn bằng cách định vị và hình dung chúng đang ở đâu trong thời gian thực, nơi mà chúng đã đi du lịch và tần suất chúng di chuyển Theo dõi tài sản cung cấp tùy chọn thanh toán cho mỗi tài sản và bao gồm các tính năng nâng cao trên đầu Bản đồ, Tuyến đường và Địa điểm Nó rất lý tưởng cho các doanh nghiệp cần lập kế hoạch các tuyến đường phức tạp, định vị tài sản chính xác và thường xuyên, quản lý và vận hành hàng ngàn tài sản ở quy mô hoặc hiểu các điều kiện đường thời gian thực - Tạo các tuyến hiệu quả cho cả hành trình hạm đội phức tạp nhất: Tạo hành trình đa điểm với dữ liệu cập nhật về khoảng cách giữa các điểm và thời gian di chuyển ước tính Nhận các tuyến đường được đề xuất cho tối đa 25 điểm tham chiếu trong điều kiện giao thông dự đoán và thời gian thực Với các tuyến đường được tối ưu hóa và khả năng định vị và trực quan hóa xe tải trong thời gian thực, bạn có thể giữ cho tài xế của mình không bị chậm, tối đa hóa việc sử dụng đội tàu, lên lịch cho xe tải không hoạt động để bảo trì và giảm việc giao hàng trễ - Theo dõi và trực quan hóa các tài sản được kết nối của bạn với dữ liệu vị trí chính xác: Cho dù tài sản IOT của bạn ở trong nhà, ở vùng sâu vùng xa hoặc được phân phối trên hàng trăm thành phố, bạn có thể theo dõi chúng một cách chính xác Bạn có thể kích hoạt giám sát vị trí trong vòng vài mét đối với các tài sản quan trọng với bạn Tối ưu hóa các lô hàng khi bạn theo dõi từ xa chúng từ dây chuyền lắp ráp đến đích cuối cùng của chúng Hoặc cho phép người dùng hiểu vị trí và môi trường chính xác của họ bằng cách thêm định vị địa lý cho các thiết bị mà không cần GPS hoặc phần cứng chuyên dụng - Dựa vào thông tin vị trí chính xác trên toàn thế giới: Cho dù bạn đang mở rộng phân phối IoT sang Brazil hoặc phát triển đội tàu của mình để bao quát toàn bộ Châu Âu, chúng em đã giúp bạn có được dữ liệu toàn diện cho hơn 200 quốc gia và vùng lãnh thổ Ngay cả ở những vùng xa hoặc thành phố nơi tiếp nhận kém, chúng em thường sử dụng tháp di động và Wi-Fi để cung cấp thông tin vị trí chính xác cho dù tài sản của bạn ở đâu 12 Chương 2: GOOGLE MAP API 2 1 SỬ DỤNG GOOGLE MAP API 2 1 1 Giới thiệu tổng quan - Google Map là một dịch vụ ứng dụng vào công nghệ bản đồ trực tuyến trên web miễn phí được cung cấp bởi Google, hỗ trợ nhiều dịch vụ khác của Google đặc biệt là dò đường và chỉ đường; hiển thị bản đồ đường sá, các tuyến đường tối ưu cho từng loại phương tiện, cách bắt xe và chuyển tuyến cho các loại phương tiện công cộng (xe bus, xe khách ), và những địa điểm (kinh doanh, trường học, bệnh viện, cây ATM ) trong khu vực cũng như khắp nơi trên thế giới - Map API Là một phương thức cho phép 1 website B sử dụng dịch vụ bản đồ của website A (gọi là Map API) và nhúng vào website của mình (site B) Site A ở đây là google map, site B là các website cá nhân hoặc tổ chức muốn sử dụng dịch vụ của google (di chuột, room, đánh dấu trên bản đồ…) - Các ứng dụng xây dựng trên maps được nhúng vào trang web cá nhân thông qua các thẻ Javascript do vậy việc sử dụng API google rất dễ dàng - Google Map API đã được nâng cấp lên phiên bản v3 không chỉ hỗ trợ cho các máy để bàn truyền thống mà cho cả các thiết bị di động; các ứng dụng nhanh hơn và nhiều hơn - Các dịch vụ hoàn toàn miễn phí với việc xây dựng một ứng dụng nhỏ Trả phí nếu đó là việc sử dụng cho mục đích kinh doanh, doanh nghiệp 2 1 2 Đăng ký sử dụng Google map API Tất cả các ứng dụng Maps API nên tải Maps API sử dụng một API key Một key API cho bạn kiểm soát các ứng dụng của mình và cũng là việc google có thể liên lạc với bạn về ứng dụng có ích bạn đang xây dựng Từ đó có cơ hội phát triển bản thân mình Tạo một API key: + Truy cập vào https://code google com/apis/console và đăng nhập bằng tài khoản gmail của mình + Click vào Services link bên trái menu + Kéo xuống dưới tìm Google Maps API v3 service và kích hoạt dịch vụ + Click API Access, một API key sẽ hiện lên và bạn sẽ coppy lại để sử dụng 13 Hình 2 1: API Access 2 1 3 Load bản đồ về trang web cá nhân + Khi đã có key google cung cấp ta sử dụng key đó trong đoạn mã Javascript trong thẻ : Hình 2 2: Javascript trong thẻ head + Tạo một hàm trong Javascript Hình 2 3: Hàm trong Javascript 14 + Đầu tiên tạo một đối tượng bản đồ chứa các biến khởi tạo bản đồ Hình 2 4: Biến khởi tạo bản đồ + Center: một điểm làm trung tâm của bản đồ Latitudes(vĩ độ) và Longitudes(kinh độ) Tương tự như trên khi ta định nghĩa 1 điểm là tọa độ trong Map ta để nó nằm trong new google maps LatLng(lat,lng) Một điểm được xác định bởi vĩ độ và kinh độ + Zoom: độ zoom được quy định khi Map được load + Map type: loại Map được hiển thị sau khi load xong có 4 loại để chọn: ROADMAP, SATELLITE, HYBRID, TERRAIN + Map object: var map = new google maps Map(document getElementById("map_canvas"), myOptions); + Xác định id html chứa đối tượng Map với tùy chọn "myOptions" như trên Mã Javascript: '''''''''''''''' html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } src="http://maps googleapis com/maps/api/js?key=YOUR_API_KEY&sensor=SET _TO_TRUE_OR_FALSE"> 15 function initialize() { var myOptions = { center: new google maps LatLng(-34 397, 150 644), zoom: 8, mapTypeId: google maps MapTypeId ROADMAP }; var map = new google maps Map(document getElementById("map_canvas"), myOptions);} Hình 2 5: Mã trong Javascript 2 1 4 Tạo một Google map đơn giản Trong thẻ gọi onload = "initialize()" để load bản đồ vào trong thân của trang html Với kết quả trên ta chỉ có thể thao tác zoom, rê chuột, xem trên bản đồ Để làm được các thao tác khác như: vẽ, đánh dấu điểm, lấy tọa độ trên bản đồ, chỉ dẫn đường cần xem thêm các mục được xây dựng dưới đây - Truy cập vào https://code google com/apis/console và đăng nhập bằng tài khoản gmail của mình - Click the APIs & auth -> APIs - Kéo xuống dưới tìm Google Maps JavaScript API v3 và kích hoạt dịch vụ bằng việc click vào button chuyển trạng thái từ OFF sang ON - Click API Access -> Create new Browser key , một API key sẽ hiện lên và bạn sẽ coppy lại để sử dụng 16 Hình 2 6: Tạo key 2 2 TƯƠNG TÁC GIỮA SERVER APP VÀ GOOGLE SERVERS - Để sử dụng các dịch vụ của Google bạn cần tạo 1 tài khoản mới(project service) trên https://console developers google com - Service Accounts xác thực đối tượng truy cập Google API’s bằng cách sử dụng OAuth trên danh nghĩa là 1 ứng dụng web thay vì là 1 người dùng Tức là nó sử dụng chứng chỉ tài khoản dịch vụ của ứng dụng để chứng thực - Trước khi tạo request truy cập API, cần phải có 1 access token bằng cách sử dụng các tài khoản dịch vụ đã được chứng nhận request này là POST request với các params như grant-type và JWT(JSON Web Token) đã đăng nhập bằng key - Các loại tham số cấp đầu tiên là 1 jet-bearer (chỉ cần 1 access token mà không cần refresh token) Param thứ 2 là JWT chứa thông tin xác thực tài khoản trong chuỗi mã hóa được định dạng trước chứa tiêu đề, tập các yêu cầu(claim set) và chữ ký Tiêu đề định nghĩa thuật toán signin được sử dụng trong việc signing JWT, claim set chứa địa chỉ email của tài khoản dịch vụ, phạm vi, thời gian hết hạn Chữ ký là thành phần có chữ ký của tiêu đề và claim set - Sau khi tạo request tới máy chủ ủy quyền, nhận được một access token kéo dài ít nhất là 1 giờ Sử dụng access token này, có thể truy cập vào Google APIs theo cách sau : sử dụng user’s credential, cách thức như hình dưới đây : 17 Hình 2 7: Sử dụng user’s credential - Tiến trình trên yêu cầu ứng dụng phải tạo và ký hiệu mã hóa JWT''''s, rất dễ để phạm sai lầm nghiêm trọng tác động rất lớn tới sự an toàn của ứng dụng Thay vào đó tất cả có thể được thực hiện bởi việc sử dụng các thư viện client Ruby chứa gem google_api_client cho việc lấy `access token, tạo ra các yêu cầu để truy cập vào API và phân tích kết quả - Tiến trình trên yêu cầu ứng dụng phải tạo và ký hiệu mã hóa JWT''''s, rất dễ để phạm sai lầm nghiêm trọng tác động rất lớn tới sự an toàn của ứng dụng Thay vào đó tất cả có thể được thực hiện bởi việc sử dụng các thư viện client Ruby chứa gem google_api_client cho việc lấy `access token, tạo ra các yêu cầu để truy cập vào API và phân tích kết quả 2 3 MỘT SỐ ỨNG DỤNG CỦA GOOGLE MAP API - Đánh dấu các địa điểm trên bản đồ kèm theo thông tin cho địa điểm đó : khu vui chơi giải trí, nhà hàng khách sạn, cây ATM, bệnh viện, trường học,… bất cứ địa điểm nào bạn muốn - Chỉ dẫn đường đến các địa điểm cần tìm(đường tối ưu và nhiều option khác),chỉ dẫn đường giao thông công cộng, có thể là các địa điểm cung cấp như trên Ở đây sử dụng các service google cung cấp - Khoanh vùng khu vực: các trung tâm kinh tế, khu đô thị, khu ô nhiễm… - Tình trạng giao thông các khu vực… từ đó đưa ra các giải pháp… 18 2 4 GOOGLE MAPS OVERLAYS (LỚP PHỦ) TRÊN BẢN ĐỒ 2 4 1 Khái niệm lớp phủ Lớp phủ (overlays) là các đối tượng trên bản đồ và được gắn với vĩ độ, kinh độ cho nên nó sẽ di chuyển cùng bản đỗ khi ta kéo hoặc zoom bản đồ Overlays phản ánh các đối tượng mà bạn thêm vào bản đồ như points, line, areas, hoặc các "collections of object" tạm gọi là bộ sưu tập đối tượng, các đối tượng mà bạn muốn xây dựng Ví dụ: 1 khu vực công nghiệp, khu vực sông, khu vui chơi giải trí Sau khi load được bản đồ ta thêm các đoạn code xây dựng lớp phủ sau khi đối tượng map được khởi tạo: var map = new google maps Map(document getElementById("map_canvas"), myOptions); Sau này cũng vậy các ứng dụng khác nếu muốn được thêm vào thì các đoạn code được khai báo sau khi đối tượng map được khởi tạo Thêm các lớp phủ : Đầu tiên phải xác định lớp phủ nào cần xây dựng để có thể hiên thị trên Map Thêm lớp phủ trực tiếp lên bản đồ sử dụng phương thức setmap() Ví dụ sau thêm lớp phủ Markers để đánh giấu điểm trên map + Mã Javascript: Hình 2 8: Mã Javascript Lớp phủ Markers được thêm vào bởi đối tượng trong Javascript cùng các tùy chọn của lớp phủ: 19 Hình 2 9: Lớp phủ Marker Sau đó gọi phương thức setmap() để thêm vào bản đồ "marker setMap(map)" Loại bỏ lớp phủ: Để loại bỏ ta gọi phương thức setmap() của lớp phủ và đặt là null "setmap(null)" Nhưng đây mới chỉ loại bỏ tạm thời không cho chúng xuất hiện chứ chưa xóa hoàn toàn Nhưng trên bản đồ với một ứng dụng nhỏ thì ít nhất ta cũng phải sử dụng trên 2 lớp phủ Vì vậy để quản lý chúng thật sự dễ dàng ta tạo một mảng chứa các lớp phủ Khi muốn tạo một lớp phủ ta chỉ setmap() trên các phần tử của mảng hoặc loại bỏ chúng cũng vậy Điều quan trọng là có thể xóa các lớp phủ khi cho độ dài của mảng bằng 0 var map; var markersArray = []; function initialize() { var haightAshbury = new google maps LatLng(37 7699298, -122 4469157); var mapOptions = {zoom: 12, center: haightAshbury, mapTypeId: google maps MapTypeId TERRAIN }; map = new google maps Map(document getElementById("map_canvas"), mapOptions); google maps event addListener(map, ''''click'''', function(event) { addMarker(event latLng);});} function addMarker(location) { marker = new google maps Marker({ position: location, map: map}); markersArray push(marker);} // Removes the overlays from the map, but keeps them in the array 20 function clearOverlays() { if (markersArray) { for (i in markersArray) { markersArray[i] setMap(null);}}} // Shows any overlays currently in the array function showOverlays() { if (markersArray) { for (i in markersArray) { markersArray[i] setMap(map);} }} // Deletes all markers in the array by removing references to them function deleteOverlays() { if (markersArray) { for (i in markersArray) { markersArray[i] setMap(null);} markersArray length = 0;}} Hình 2 10: Mảng chứa các lớp phủ 2 4 2 Các loại lớp phủ 2 4 2 1 Markers Markers dùng để xác định một điểm trên bản đồ hoặc đánh dấu địa điểm dựa trên vĩ độ và kinh độ Theo mặc định sử dụng icon của google làm hình ảnh hiện lên điểm đánh dấu Hoặc muốn một icon của mình thì ta gọi phương thức setIcon() Sau đây là các trường được xây dựng trong new google maps Marker : Position(bắt buộc): quy định là tọa độ LatLng của điểm được đánh dấu map(tùy chọn): quy định đối tượng bản đồ được đánh dấu nếu thuộc tính này được khai báo trong đây nó sẽ thay thế cho Markers setMap(map) Icon(tùy chọn): hình ảnh tùy chọn mà bạn muốn hiển thị thay thế hình ảnh mặc định Dùng tùy chọn này thay thế cho marker setIcon(link đến hình ảnh trong thư mục) Title(tùy chọn): tiêu đề của địa điểm Draggable(tùy chọn): thuộc tính động của điểm đánh dấu, thể hiện sự chuyển động của điểm được đánh dấu Nếu TRUE tính động được khởi động 21 Animation: cách thức chuyển động của điểm đánh dấu CÓ 2 cách thức DRAG, Bounce Hình 2 11: Markers Mã Javascript sau mô tả việc đánh dấu nhiều địa điểm trên bản đồ: function initialize() { var myOptions = { zoom: 10, center: new google maps LatLng(20 779227,107 0755), mapTypeId: google maps MapTypeId ROADMAP } var map = new google maps Map(document getElementById("map_canvas"),myOptions); var image = "vietnam_32 png"; for (var i = 0; i < toado length; i++) { var beach = toado[i]; var myLatLng = new google maps LatLng(beach[0], beach[1]); 22 var marker = new google maps Marker({ position: myLatLng, map: map, icon: image }); } //setMarkers(map, beaches); } var toado = [ [20 817741,106 751404], [20 964004,107 004089], [20 807472,106 99585] ]; Hình 2 12: Markers + Hình ảnh kết quả: ình 2 13: Hình ảnh kết quả của Markers 23 2 4 2 2 Polylines Polylines dùng để thể hiện đường kết nối trên bản đồ dựa vào các tọa độ Các đoạn thẳng được hiển thị với các tùy chọn cho nó như màu sắc, độ đậm nhạt, độ rộng cùa đường Phải có tối đa 2 điểm để tạo nên 1 đường thẳng Cũng giống như lớp phủ Markers ta khai báo lớp phủ Polyline và các thuộc tính của nó như sau: Hình 2 14: Lớp phủ của Polylines Mã Javascript sau sẽ hiển thị đường nối các điểm được khai báo trong 1 mảng function initialize() { var myLatLng = new google maps LatLng(21 010163,105 817823); var myOptions = { zoom: 14, center: myLatLng, mapTypeId: google maps MapTypeId ROADMAP }; var map = new google maps Map(document getElementById("map_canvas"), myOptions); var flightPlanCoordinates = [ new google maps LatLng(21 010163,105 817823), new google maps LatLng(20 998785,105 84074), new google maps LatLng(21 005676,105 876961), new google maps LatLng(21 037403,105 84383) ]; 24 var flightPath = new google maps Polyline({ path: flightPlanCoordinates, strokeColor: "#FF0000", strokeOpacity: 1 0, strokeWeight: 2 }); flightPath setMap(map); } Hình 2 15: Mã Javascript Hình ảnh kết quả: Hình 2 16: Hình ảnh kết quả 2 4 2 3 Polygon Cũng giống như đối tượng Polylines, Polygon xây dựng dựa trên một loạt các tọa độ, tuy nhiên thay vì mở thì nó hoàn toàn khép kín trong một khu vực Hình ảnh kết quả: 25 Hình 2 17: Hình ảnh kết quả 2 4 2 4 Infowindows Inforwindows là một cửa sổ chứa các thông tin Hình 2 18: Hình ảnh kết quả Tạo một Infowindows cũng giống như các lớp phủ khác: 26 Hình 2 19: Lớp phủ của Inforwindows Gọi Infowindows open() để có thể mở được cửa sổ - Các loại lớp phủ : + Marker : xác định một điểm trên bản đồ hoặc đánh dấu địa điểm dựa trên vĩ độ và kinh độ, có thể được hiển thị bằng icon (hình ảnh) tùy chỉnh của người dùng ví dụ như icon dưới đây: Hình 2 20: Marker + Polyline : chuỗi các đường thẳng trên bản đồ + Polygon : chuỗi các đường thẳng trên bản đồ và các khối "closed" (tô màu cho 1 khối kín các điểm) + Circle and Rectangle : đường tròn và hình chữ nhật + Info Windows : hiển thị nội dung trong 1 popup ballon ở phía trên của map + Custom overlays 2 5 CÁC SỰ KIỆN CỦA GOOGLE MAP API Một số đối tượng trong Maps API được thiết kế để đáp ứng với sự kiện người sử dụng chẳng hạn như các sự kiện chuột hoặc bàn phím Một đối tượng google maps Marker có thể lắng nghe người sử dụng các sự kiện sau đây, ví dụ : + ''''click'''' + ''''dblclick'''' + ''''mouseup'''' + ''''mousedown''''''''mouseover'''' + ''''mouseout'''' 27 Một sự kiện được gọi như sau: google maps event addListener(đối tượng, sự kiện gọi, function() { } Hình 2 21: Đoạn mã sự kiện Sau đây sẽ trình bày các sự kiện trên các đối tượng map: function initialize() { var myLatLng = new google maps LatLng(21 037403,105 84383); var myOptions = { zoom: 14, center: myLatLng, mapTypeId: google maps MapTypeId ROADMAP }; var map = new google maps Map(document getElementById("map_canvas"), myOptions); google maps event addListener(map, ''''click'''', function(event) { placeMarker(event latLng); }); function placeMarker(location) { var marker = new google maps Marker({ position: location, map: map }); } } Hình 2 22: sự kiện trên các đối tượng map 28 Hình 2 23: Các Markers trên bản đồ Sự kiện xuất hiện khi click chuột vào marker một cửa sổ thông tin sẽ xuất hiện: Hình 2 24: Click vào Markers 29 Một số sự kiện cơ bản khác: - Zoom_changed: sự kiện sẽ thực thi khi ta zoom size trên map - Center_changed: sự kiện sẽ thực thi khi thuộc tính center của map thay đổi - Title_changed: sự kiện sẽ thực thi khi thuộc tính title của map thay đổi - Heading_changed: sự kiện sẽ thực thi khi thuộc tính heading của map thay đổi - Dragstart: sự kiện sẽ thực thi khi người dùng bắt đầu drag bản đồ - Drag: sự kiện sẽ thực thi khi người dùng drag bản đồ - Dragend: sự kiện sẽ thực thi khi người dùng kết thúc drag bản đồ - Maptypeid_changed: sự kiện sẽ thực thi khi thuộc tính maptypeid của map thay đổi b Event Listeners (lắng nghe sự kiện) 2 6 CÁC ĐIỀU KHIỂN CỦA GOOGLE MAP API a Điều khiển mặt định - Zoom – hiển thị 1 slider hoặc button “+/-” để điều khiển độ zoom (zoom level) của bản đồ - Pan – công cụ để dịch chuyển bản đồ sang trái, phải, trên, dưới - MapType – cho phép người dùng chuyển đổi giữa các loại bản đồ (roadmap và satellite) - Street View – hiển thị 1 icon Pegman (hình người) để có thể kéo bản đồ để enable Street View (xem chi tiết về đường phố) b Một số điều khiển khác - Scale – hiển thị 1 thành phần chia tỷ lệ bản đồ - Rotate – hiển thị một biểu tượng nhỏ hình tròn để xoay bản đồ - Overview Map – hiển thị một thumbnail overview map cho phép xem bản đồ hiện tại trong một khu vực rộng hơn c Vô hiệu hóa các control mặc định Thiết lập thuộc tính disableDefaultUI (trong Map options object) thành true: disableDefaultUI:true d Bật tất cả các control - Một số control xuất hiện trên bản đồ theo mặc định, trong khi những control khác sẽ không xuất hiện trừ khi ta thiết lập chúng 30 - Thêm hoặc xóa các control từ bản đồ được quy định trong Map options object - Thiết lập control thành true để làm nó hiển thị (visible) Thiết lập control thành false để ẩn nó đi 2 7 CÁC LOẠI CỦA GOOGLE MAP API - ROADMAP (bản đồ truyền thống, default 2D map) - SATELLITE (photographic map) - HYBRID (photographic map + tên đường và tên thành phố) - TERRAIN (bản đồ với hệ thống sông ngòi, núi ) 31 Chương 3: CHƯƠNG TRÌNH THỰC NGHIỆM 3 1 BÀI TOÁN Mọi người muốn tìm một địa diểm nào đó mà chỉ có địa chỉ của nó và không biết nó ở chỗ nào, mọi người cần tìm đi đến đó bằng cách định vị vị trí của mình để đến được vị trí mà mình cần đến đó mọi người cần phải có bản đồ để tìm kiếm nhanh và đồng thời nó có thể chỉ bạn đến được đó Mọi người muốn chỉnh cho nó lớn nhỏ tùy ý của mình và muốn xem một số đặt điểm cả vị trí mà mình muốn tới mà có trên bản đồ mọi người phải cần tới các chức năng xem phố và zoom Ngoài ra nếu muốn chuyển san chế độ vệ tinh mọi người cũng có thể nhìn thấy cảnh quan tù trên cao xuống 3 2 MỘT SỐ ĐOẠN CODE CÓ TRONG CHƯƠNG TRÌNH - Code load bản đồ - Code load vị trí 32 - Code chỉ đường 33 - Code Tìm kiếm 34 3 3 MỘT SỐ CHỨC NANG CỦA CHƯƠNG TRINH - Chức năng zoom Hình 3 1: Chức năng zoom - Chức năng Xem phố Hình 3 2: Chức năng Xem phố - Chức năng định vị Hình 3 3: Chức năng định vị 35 - Chức năng tìm kiếm Hình 3 4: Chức năng tìm kiếm - Chức năng chỉ đường Hình 3 5: Chức năng chỉ đường 36 Phần 3 KẾT LUẬN VÀ KIẾN NGHỊ 1 Kết luận + Những vấn đề đạt được - Giúp mọi người hiểu thêm về bản đồ, cách tự tạo cho mình được bản đồ tùy ý với các tính năng tự chọn theo ý của mình - Giúp mọi người có thể dùng bản đồ thuận thục hơn, với các tính năng của nó + Nhưng vấn đề chưa đạt được - Giao diện thiết kế còn chưa rõ ràng - Chưa đầy đủ các tính năng nâng cao của bản đồ 2 Kiến nghị - Thực hiện khóa luận này là trang Web đầu tay hoàn chỉnh của em, kiến thức cũng như kỹ năng lập trình còn hạn chế nên khó tránh khỏi những thiếu sót Thực hiện khóa luận đã giúp em hiểu thêm kiến thức Client/Server, reponsive giao diện, sử lý thành công các chức năng cơ bản của một Website, ứng dụng Google Map Api xây dựng ứng dụng hỗ trợ định vị, tìm kiếm và chỉ đường - Một lần nữa em xin gởi lời cảm ơn tới cô Trần Thị Diệu Linh đã nhiệt tình hướng dẫn em hoàn thành đề tài này 37 Phần 4 TÀI LIỆU THAM KHẢO [1] Trần Thị Diệu Linh, Bài giảng “Thiết kế và lập trình web”, Trường ĐH Quảng Nam [2] https://www w3schools com/graphics/google_maps_reference asp [3] https://developers google com/maps [4]https://tech vccloud vn/api-la-gi-phan-loai-va-vi-du-ve-api [5]https://viblo asia/p/api-la-gi-nhung-dac-diem-noi-bat-cua-web-api 38 NHẬN XÉT CỦA CÁN BỘ HƯỚNG DẪN Cán bộ hướng dẫn ………………… Sinh viên thực hiện …………………… Cán bộ chấm 1 ………………… Cán bộ chấm 2 …………………

TÌM HIỂU GOOGLE MAP API VÀ XÂY DỰNG ỨNG DỤNG HỖ TRỢ ĐỊNH VỊ TÌM KIẾM VÀ CHỈ ĐƯỜNG - Full 10 điểm

Thông tin tài liệu

Từ khóa liên quan

Tài liệu cùng người dùng

Tài liệu liên quan