Đang tải... (xem toàn văn)
Hướng dẫn xây dựng một ứng dụng đơn giản trong việc tìm đường ứng dụng hệ thông Google maps api của Google. Thực hiện animation marker trong chuyển động từ điểm đầu đến điểm cuối trong việc tìm đường.
MỤC LỤC Tìm kiếm địa xác Toàn mã chương trình Tài liệu tham khảo Phần I: LỜI MỞ ĐẦU Ngày nhu cầu sử dụng đồ công việc người lớn Internet bùng dẫn tới đời nhiều công cụ đồ trực tuyến có Google Map, dịch vụ hoàn toàn miễn phí Đối với nhà phát triển web hay ứng dụng di động, đây, em muốn đề cập đến Google Maps API, dịch vụ Google, cho phép nhà phát triển dễ dàng sử dụng tiện ich việc phát triển ứng dụng web hay di động Trong phạm vi báo cáo này, em tập trung vào dịch vụ, tiện ích tìm đường Google Maps API hai điểm xác định đồ xây dựng ứng dụng demo chuyển động nhiều animation từ điểm đầu đến điểm cuối đường tìm Phần II: GOOGLE MAPS API I Giới thiệu Google Maps API: Tổng quan Google Maps API: • • • • Google Maps dịch vụ ứng dụng công nghệ đồ trực tuyến web cung cấp miễn phí Google Nó cung cấp đồ đường đi, điều kiện giao thông thời gian thực, định tuyến tuyến đường tối ưu cho việc di chuyển cách bộ, sử dụng ô tô, hay sử dụng số loại phương tiện giao thông công cộng, hình ảnh vệ tinh khắp nơi giới Maps API là: - Đó phương thức cho phép website nhân tổ chức muốn sử dụng dịch vụ google, nhúng Google map vào trang web thực số thao tác rê chuột, zoom, đánh dấu đồ, - Các ứng dụng xây dựng maps nhúng vào trang web cá nhân thông qua thẻ javascripts Google Maps API phiên phiên Google Maps API V3, cho phép hỗ trợ không máy tính để bàn, laptop thông thường mà hỗ trợ thiết bị di động dễ dàng Các dịch vụ hoàn toàn miễn phí với việc xây dựng ứng dụng nhỏ không mang tính chất kinh doanh, doanh nghiệp Một số ứng dụng xây dựng từ việc sử dụng Google Maps API: - Ứng dụng dẫn đường đến địa điểm cần tìm, dẫn đường giao thông công cộng, ứng dụng du lịch, khám phá, thám hiểm, - Đánh dấu địa điểm đồ thông tin cho địa điểm: khu vui chơi giải trí, nhà hàng khách sạn, quán ăn ngon, shop quần áo thời trang, - Khoanh vùng trung tâm kinh tế, công nghiệp, khu vực bị ô nhiễm, khu vực thường xuyên xảy ách tắc giao thông quy hoach giao thông, khu vức xây dựng hay sử dụng việc quy hoạch đô thị, - Ta liệt kê só ứng dụng cụ thể như: ứng dụng đánh dấu địa điểm facebook, ứng dụng Foody: cung cấp cho khách du lịch địa điểm ăn uống hầy hết tỉnh thành nước, đặc biệt thành phố du lịch, ứng dụng ClingMe: giúp người dùng tìm kiếm quán ăn, nhà hàng, cà phê, tiệm bánh ngọt, xung quanh nơi bạn đứng gần II Mô tả thành phần cần thiết tìm đường Google Maps API: Load đồ trang web cá nhân: Để thực việc tìm đường Google Map, trước ta cần phải tiến hành load đồ trang web cá nhân: - Trước hết, để sử dụng tất ứng dụng Maps API cần phải có API Key Google cung cấp Key API cho phép developer thực kiểm soát ứng dụng việc google liên lạc với bạn ứng dụng có ích bạn xậy dựng VD như: - Bản đồ sau load từ server Google Maps đồ đơn giản Nó bao gồm thao tác như: zoom, kéo rê chuột, xem hình ảnh đồ đường hình ảnh vệ tinh, Muốn thực chức tìm đường, cần phải thực lập trình, sử dụng hàm cung cấp Google Maps API V3 - Để load đồ Google trang web, sử dụng đoạn mã JavaScript sau: Example2 function Setup(){ var Options = { center: { lat: 21.02422526767355, lng: 105.84773308334343}, zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById('map'),Options); } Marker: -Marker: loại lớp phủ mà Google Maps API cho phép sử dụng để đánh dấu vị trí có tọa độ xác định Ngoài ra, chúng đối tượng thuộc lớp Markers Google Maps API - Google Maps API cho phép bạn thực đánh dấu nhiều marker đồ Một marker sử dụng dạng hình ảnh mặc định Google Maps API cung cấp thay hình ảnh tùy thích người lập trình - Các Markers thiết kế để tương tác Ví dụ, gán kiện ‘click’ để đánh dấu lên vị trí xác định đồ mộ marker cho phép người sử dụng di chuyển marker animation đường có điểm đầu điểm cuối xác định hay đơn giản cho chuyển động chỗ cách cho phép thuộc tính Draggable thành true - Các thao tác với marker: • Thêm marker: Một số thuộc tính đối tượng Marker Google Maps Api: - Position: Tọa độ xác định vị trí mà marker đánh dấu - Map: đồ chứa position mà marker đánh dấu Bản đồ cần xác định rõ ràng thực hiện.Thông thường, đồ đánh dấu đồ mà bạn load trước - Icon (tùy chọn): lựa chọn hình ảnh mà lập trình viên cảm thấy phù hợp - Title (tùy chọn): tiêu đề địa điểm - Draggable (tùy chọn): thể chuyển động Marker vị trí đánh dấu - Ví dụ hàm thêm marker (hàm addMarker1) gán kiện click : function addMarker1(location, map){ var marker1 = new google.maps.Marker({ position: location, map: map }); } map.addListener('click',function(event){ map); addMarker1(event.latLng, }); - Chúng ta đánh dấu nhiều marker vào đồ cách tạo mảng markers đặt marker đánh dấu vào mảng: Var markers = []; function addMarker1(location, map){ var marker1 = new google.maps.Marker({ position: location, map: map }); markers.push(marker1); } • Xóa marker: - Để xóa marker khỏi đồ, ta truyền tham số null cho phương thức setMap(): marker.setMap(null); - Để xóa mảng markers ta sử dụng phương thức setMap(), cách sử dụng vòng lặp for chạy từ đến markers.length: function setMarkers(map){ for(var i=0; i