Công nghệ Google map API và ứng dụng

Ngày nay sự phát triển của mạng Internet đã khiến người ta rất khó để từ chối sử dụng nó. Vì vậy, tạo một ứng dụng hoạt động trên internet sẽ tạo sự thuận lợi cho người sử dụng. Mặc khác, với dữ liệu về bản đồ được Google cung cấp miễn phí thì ta khó có thể từ chối để “nhúng” nó vào ứng dụng của mình. Để đưa Google Map lên website cá nhân, bạn không cần phải có khả năng lập trình siêu hạng, chỉ cần vài bước đơn giản và một ít kiến thức về HTML là có thể thực hiện điều này. Yếu tố cần thiết để đưa Google Map lên website là khai thác giao diện lập trình ứng dụng API (Application Programming Interface) của Google Map được Google cung cấp cho người dùng.

PHỤ LỤC

1 PHẦN 1: GIỚI THIỆU VỀ DỰ ÁN PHẦN MỀM 4

1.1.Phạm vi và đối tượng sử dụng phần mềm: 5

1.2.Phương pháp nghiên cứu: 5

2 PHẦN 2: XÁC ĐỊNH NHU CẦU NGƯỜI DÙNG: 5

2.1 Phương pháp xác định nhu cầu: 5

2.2 Danh mục và mô tả chi tiết các nhu cầu người dùng: 5

3 PHẦN 3: PHÂN TÍCH BÀI TOÁN: 6

3.1 Lập sơ đồ trình tự thực hiện bài toán: 6

3.2 Phân tích kỹ thuật cho từng bước thực hiện bài toán: 6

4 PHẦN 4: SƠ ĐỒ LUỒNG DỮ LIỆU 7

5 PHẦN 5: THIẾT KẾ CƠ SỞ DỮ LIỆU 8

5.1 Thiết kế các bảng dữ liệu: 8

5.2 Lập sơ đồ quan hệ giữa các bảng dữ liệu: 10

6 PHẦN 6: THIẾT KẾ GIAO DIỆN 11

6.1 Các trang giao diện: 11

6.2 Quan hệ giữa các trang: 12

7 PHẦN 7 : KẾT LUẬN VÀ KIẾN NGHỊ 13

8 PHẦN 8: PHỤ LỤC GIỚI THIỆU VỀ GOOGLE MAP API 15

ỨNG DỤNG CÔNG NGHỆ GOOGLE MAP API VÀO CÔNG TÁC QUẢN LÍ HỒ SƠ THIẾT KẾ CÔNG TRÌNH GIAO

THÔNG.

SVTH: NGUYỄN THÀNH TRUNG GVHD: PGS.TS LÊ ĐẮC CHỈNH.

1 PHẦN 1: GIỚI THIỆU VỀ DỰ ÁN PHẦN MỀM

Ở nước ta, số lượng các công trình giao thông đã và đang được xây dựng ngày càng nhiều Vì vậy công tác theo dõi, quản lý khai thác công trình, quản lý hồ sơ thiết kế, đánh giá chất lượng và khả năng chịu lực của chúng ngày càng khó khăn, phức tạp

Để làm tốt các công tác này thì trước hết phải quản lý chặt chẽ hồ sơ của công trình, bao gồm hồ sơ thiết kế gốc và các thông tin được cập nhật trong suốt quá trình khai thác sử dụng công trình cũng như những thay đổi qua mỗi lần duy tu hoặc sửa chữa

Đặc điểm của hồ sơ thiết kế các công trình giao thông, nhất là ở nước ta, thường hay bị thay đổi do nhiều nguyên nhân khác nhau dẫn đến làm sai lệch, độ tin cậy không cao Công tác lưu trữ, bảo quản cũng như phân loại chúng cũng gặp rất nhiều khó khăn Vì vậy việc nghiên cứu ứng dụng công nghệ thông tin để quản

lý các hồ sơ này đang trở thành rất cấp thiết

Ngày nay sự phát triển của mạng Internet đã khiến người ta rất khó để từ chối

sử dụng nó Vì vậy, tạo một ứng dụng hoạt động trên internet sẽ tạo sự thuận lợi cho người sử dụng Mặc khác, với dữ liệu về bản đồ được Google cung cấp miễn phí thì ta khó có thể từ chối để “nhúng” nó vào ứng dụng của mình Để đưa

Google Map lên website cá nhân, bạn không cần phải có khả năng lập trình "siêu hạng", chỉ cần vài bước đơn giản và một ít kiến thức về HTML là có thể thực hiện điều này Yếu tố cần thiết để đưa Google Map lên website là khai thác giao diện lập trình ứng dụng API (Application Programming Interface) của Google Map

Nhiệm vụ đặt ra là xây dựng một chương trình quản lý hồ sơ các công trình cầutrên cơ sở sử dụng GOOGLE MAP API Qua đó nâng cao kỹ năng ứng dụng tin học vào công tác thiết kế, quản lý và khai thác các công trình cầu đường.

Cuối cùng, tôi xin cảm ơn các thầy cô thuộc bộ môn Tự động hóa, đặc biệt là thầy Lê Đắc Chỉnh đã tận tâm hướng dẫn tôi hoàn thành đề tài trong thời gian qua

Do hạn chế về thời gian và năng lực nên đề còn sơ sài và nhiều thiếu xót, mong quí thầy cô thông cảm và giúp đỡ để đề tài này được hoàn thiện hơn

Tôi xin chân thành cám ơn!

1.1.1 Phạm vi của bài toán :

Hệ thống trợ giúp việc lưu trữ và cung cấp thông tin về hồ sơ thiết kế các công trình cầu

 Nghiên cứu cách thức sử dụng Google Map API

 Nghiên cứu cấu trúc của hồ sơ thiết kế cầu

 Nghiên cứu ngôn ngữ lập trình Javascript

2 PHẦN 2: XÁC ĐỊNH NHU CẦU NGƯỜI DÙNG:

Phương pháp sử dụng để xác định nhu cầu người dùng là điều tra và khảo sát kết hợp với phỏng vấn người dùng với các câu hỏi đưa ra như:

 Cách thức lưu trữ hồ sơ hiện nay?

 Yêu cầu về cấu trúc hồ sơ công trình?

 Nhược điểm của hệ thống cũ?

Phương pháp này được áp dụng vì giúp ta tiếp cận rõ vấn đề quan tâm, yêu cầucần thiết đối với hệ thống dự định sẽ làm, những nhược điểm của hệ thống đang tồn tại

1 Giao diện dễ sử dụng Yêu cầu phải thiết kế lệnh bằng

menu, có bản đồ hiển thị vị trí công trình

độ tin cậy cao và dễ dàng nâng cấp

dữ liệu phải được BackUp thường xuyên

3 PHẦN 3: PHÂN TÍCH BÀI TOÁN:

3.2 Phân tích kỹ thuật cho từng bước thực hiện bài toán:

1.1.3 Khối chức năng “Đăng nhập” và “Kiểm tra”:

1.1.4 Khối chức năng “Tạo mới hồ sơ”:

 Đầu vào:

 Thông tin chung về hồ sơ

 Thông tin kỹ thuật của hồ sơ

 Các loại hồ sơ cần thiết (khảo sát,thuyết minh, bản vẽ, dự toán…)

 Đầu ra: không có

 Giải thuật:

Không yêu cầu phải nhập đầy đủ dữ liệu Phần mềm sẽ lưu dữ liệu vào CSDL với cấu trúc đã định sẵn

1.1.5 Khối chức năng “Xem hồ sơ”:

 Đầu vào: ID hồ sơ.

 Đầu ra:

 Thông tin chung về hồ sơ

 Thông tin kỹ thuật của hồ sơ

 Các loại hồ sơ

 Giải thuật: Phần mềm sẽ truy xuất thông tin của hồ sơ từ cơ sở dữ liệu.

1.1.6 Khối chức năng “Chỉnh sửa”:

 Đầu vào:

 Cung cấp các thông tin cần chỉnh sửa

 Đầu ra: không có.

 Giải thuật:

Phần mềm sẽ chỉnh sửa dữ liệu trong CSDL

1.1.7 Khối chức năng “Xóa”:

 Đầu vào: ID của hồ sơ.

 Đầu ra: không có.

 Giải thuật:

Phần mềm sẽ tìm trong CSDL hồ sơ có ID như trên và xóa khỏi CSDL

4 PHẦN 4: SƠ ĐỒ LUỒNG DỮ LIỆU.

5 PHẦN 5: THIẾT KẾ CƠ SỞ DỮ LIỆU

 Bảng Cau:

5.2 Lập sơ đồ quan hệ giữa các bảng dữ liệu:

6 PHẦN 6: THIẾT KẾ GIAO DIỆN.

- Default: Xuất hiện khi mở chương trình.

Khi chọn hồ sơ để xem:

- CreatNew: tạo hồ sơ mới.

- Modify: Chỉnh sửa hồ sơ.

7 PHẦN 7 : KẾT LUẬN VÀ KIẾN NGHỊ.

 Đề tài đã tập trung giải quyết các vấn đề sau:

 Nghiên cứu hồ sơ thiết kế cầu

 Xây dựng trang web quản lí hồ sơ thiết kế công trình cầu

 Kết luận:

Việc nghiên cứu để ứng dụng một chương trình quản lý vào điều kiện thực tế

là một vấn đề khá phức tạp, đòi hỏi một quy mô nghiên cứu lớn hơn Với thời giancòn hạn chế, và năng lực có hạn, việc giải quyết vấn đề trên chỉ là những kết quả bước đầu, những đánh giá ban đầu làm cơ sở cho các bước tiếp theo

Rất mong nhận được sự góp ý, chỉ bảo của các thầy cô và các bạn để giúp chochương trình được hoàn thiện hơn

Đề tài “ Ứng dụng Google Map API vào công tác quản lí hồ sơ thiết kếCTGT “ là một đề tài rất hay và thực tế, nó cần thiết cho các nhà quản lý Tôimong rằng nếu chương trình của tôi được nâng cấp và phát triển hoàn thiện thì nórất có hữu ích cho việc quản lý các công trình giao thông.

 Cùng các diễn đàn tin học trong và ngoài nước

Vì đây là phần mềm chuyên nghành giao thông nên hướng phát triển của phần mềm sẽ bổ sung các tính năng sau :

 Quản lí hồ sơ thiết kế công trình đường

 Quản lí địa chất công trình

 Quản lí thủy văn công trình

8 PHẦN 8: PHỤ LỤC GIỚI THIỆU VỀ GOOGLE MAP API.

Google Maps API cho phép bạn nhúng Google Maps vào các trang web riêng của bạn bằng cách sử dụng ngôn ngữ JavaScript API cung cấp một số tiện ích cho các thao tác bản đồ (giống như trên trang web

http://maps.google.com) và thêm vào nội dung bản đồ thông qua một loạt các dịch vụ, cho phép bạn tạo ra các ứng dụng bản đồ trên trang web của bạn một cách mạnh mẽ

Tôi sẽ mô tả cách nhúng và điều khiển một bản đồ Googe vào trang web thông qua một ví dụ cụ thể

<! DOCTYPE html "- / / W3C / / DTD XHTML 1.0 Strict / / EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title> Google Maps API </ title>

<script src = "http://maps.google.com/maps?file=api&v=2&key=abcdefg " type = "text / javascript">

var map = new GMap2 (document.getElementById ( "MyMap"));

map.setCenter (new GLatLng (37.4419, -122.1419), 13);

map.setUIToDefault (); } }

</ script>

</ head>

<body onload="initialize()" onunload="GUnload()">

<div id="MyMap" style="width: 500px; height: 300px"> </ div>

</ body>

</ html>

Trong đó:

<script src = "http://maps.google.com/maps?file=api&v=2&key=abcdefg " type = "text / javascript">

</ script>

URL http://maps.google.com/maps?

file=api&v=2&key=abcdefg trỏ tới vị trí của file JavaScript bao gồm tất

cả các biểu tượng và định nghĩa cần thiết để sử dụng Google Maps API Trang web của bạn phải chứa một từ khóa script trỏ đến URL này, bằng cách sử dụng Key mà bạn nhận được khi bạn đã đăng ký cho API Trong ví

dụ này Key được hiển thị như là abcdefg.

Đối với bản đồ, để hiển thị trên một trang web, chúng ta phải đặt một chỗ cho nó Thông thường, chúng ta làm điều này bằng cách tạo một phần tử div và tham chiếu đến phần tử này trong trình duyệt của mô hình

định một cách rõ ràng kích thước cho bản đồ bằng cách sử dụng

GMapOptions trong constructor, bản đồ hoàn toàn dùng kích cỡ của nơi chứa (phần tử div) để làm kích cỡ của nó

< div id="MyMap"style="width: 500px; height: 300px"> </ div>

1.3.1 Đối tượng cơ bản Gmap2

Var map = new GMap2 ( document getElementById ( " MyMap" ));

Lớp JavaScript đại diện cho một bản đồ là lớp GMap2 Đối tượng của lớp này xác định một bản đồ trên một trang (Bạn có thể tạo ra nhiều đối tượng của lớp này - mỗi đối tượng sẽ xác định một bản đồ riêng biệt trên trang web) Chúng ta tạo ra một đối tượng mới của lớp này bằng cách sử dụng mã toán tử JavaScript new

Khi bạn tạo một bản đồ mới, bạn chỉ định một DOM node trong trang web (thường là một phần tử div) như là một nơi chứa cho các bản đồ HTML nodes là con của JavaScript đối tượng document,

và chúng ta tham chiếu đến phần tử này thông qua phương thức

Tạo ra một bản đồ mới bên trong HTML

container đã được định sẵn,thường là một

phần tử DIV Bạn cũng có thể đặt các loại tham số tùy chọn của GMap2Options trong tham số opts.

1.3.2 Khởi tạo bản đồ :

map setCenter ( new GLatLng ( 37 4419 , - 122.1419 ), 13 );

map setUIToDefault ();

Sau khi chúng ta đã tạo ra một bản đồ thông qua GMap2

constructor, chúng ta cần phải khởi tạo nó Điều này được thực hiện bằng cách sử dụng phương setCenter() của đối tượng Map Phương

thức setCenter()đòi hỏi một GLatLng phối hợp và một cấp độ phóng to

và phương thức này phải được gửi trước bất kỳ một hành động nào khác được thực hiện trên bản đồ, bao gồm các thiết lập thuộc tính khác của bản

Ngoài ra, chúng ta cũng gọi setUIToDefault() trên map. Phương thức này thiết lập giao diện người dùng của bản đồ với cấu hình mặc định, bao gồm các điều khiển phóng to (Zoom), di chuyển(Pan), lựa chọn các loại bản đồ, v.v

1.3.3. Tải bản đồ :

<body onload="initialize()" onunload="GUnload()">

Trong khi đưa một trang HTML, các tài liệu mô hình đối tượng (DOM) được xây dựng lên, và những ngoài hình ảnh và các tập lệnh được tiếp nhận và kết hợp với các đối tượng document Để đảm bảo rằng các bản đồ của chúng ta là chỉ được đặt trên trang web sau khi trang đã nạp đầy đủ, chúng ta chỉ thực hiện hàm mà xây dựng các đối tượng GMap2 sau khi phần tử <body> của các trang HTML nhận được một sự kiện onload Làm như thế tránh các hành vi không dự định và

dễ dàng điều khiển hơn khi bản đồ được vẽ ra

Thuộc tính onload là một ví dụ về một sự kiện handler Google Maps API cũng cung cấp một số các sự kiện mà bạn có thể "lắng nghe" để quyết định những thay đổi

Hàm GUnload() là một hàm tiện ích được thiết kế để ngăn chặn

sự rò rỉ bộ nhớ (memory leaks).

Bây giờ chúng ta có một bản đồ, chúng ta cần có một cách để tham chiếu các địa điểm trên bản đồ Đối tượng GLatLng cung cấp một

cơ chế như vậy trong Google Maps API Bạn xây dựng một đối tượng

GLatLng, thông qua các thông số của nó theo thứ tự (latitude, longitude)như thứ tự trong khoa bản đồ học

var myGeographicCoordinates = new GLatLng ( myLatitude , myLongitude )

Nó rất hữu ích để tham chiếu một cách dễ dàng vào một điểm địa lý, nó cũng hữu ích để xác định giới hạn địa lý của một đối tượng

Ví dụ, một bản đồ hiện tại sẽ hiển thị một "cửa sổ" chứa toàn bộ thế giới được biết đến như một viewport Viewport này có thể được xác định bởi những điểm ở các góc của hình chữ nhật Đối tượng

GLatLngBounds cung cấp tính năng này, xác định một vùng chữ nhật bằng cách sử dụng hai đối tượng GLatLng đại diện cho những góc tây nam và đông bắc của bounding

Những đối tượng GLatLng được sử dụng nhiều trong Google Maps API Các đối tượng GMarker dùng một GLatLng trong

constructor của nó, ví dụ, đặt một Marker Overlay trên bản đồ tại vị trí địa lý nào đó

1.3.5. Các thuộc tính của bản đồ:

Mỗi bản đồ có chứa một số lượng các thuộc tính mà ta có thể

xem hoặc thiết lập Ví dụ, để tìm thấy kích thước của các viewport hiệntại, sử dụng phương thức getBounds() của đối tượng GMap2 để trả về một giá trị GLatLngBounds

Mỗi bản đồ cũng chứa một cấp độ phóng to, nó xác định độ phân

giải của khung nhìn Cấp độ Zoom từ 0 (Cấp độ thấp nhất, trong đó toàn

bộ thế giới có thể được nhìn thấy trên bản đồ) đến 19 (cấp độ cao nhất, trong đó có thể nhìn thấy các tòa nhà) là có thể có trong bản đồ bình

thường

Cấp độ Zoom khác nhau tùy thuộc vào những nơi trên thế giới

mà bạn đang tìm kiếm, như các dữ liệu trong một số phần của thế giới được xác định chi tiết hơn nhiều so với những nơi khác

Bạn có thể nhận lại cấp độ phóng to hiện thời của bản đồ bằng cách sử dụng phương thức getZoom() của đối tượng GMap2

Ngoài ra, "kiểu" của bản đồ xác định hình ảnh của bản đồ

1.3.6. Các kiểu bản đồ:

Có rất nhiều loại bản đồ có sẵn trong Google Maps API Theo mặc định, bản đồ hiển thị trong Google Maps API là bản đồ đường Tuynhiên, Google Maps API cũng hỗ trợ các loại bản đồ khác

Các loại bản đồ thường được dùng trong Google Map API:

 G_NORMAL_MAP hiển thị bản đồ đường, mặc định

 G_SATELLITE_MAP hiển thị bản đồ ảnh vệ tinh Google Earth

 G_HYBRID_MAP sẽ hiển thị hỗn hợp bản đồ đường và bản đồ ảnh vệ tinh

 G_DEFAULT_MAP_TYPES chứa một mảng ba loại bản đồ trên.

 G_PHYSICAL_MAP sẽ hiển thị một bản đồ vật lý dựa trên các thông tin về địa hình

Bạn có thể thiết lập bản đồ bằng cách sử dụng phương thức

setMapType() của đối tượng GMap2

Var map = new GMap2 ( document getElementById ( "MyMap"));

map setMapType ( G_SATELLITE_MAP );

1.3.7. Tương tác với bản đồ:

Bây giờ bạn có một đối tượng GMap2, bạn có thể tương tác với

nó Các đối tượng GMap2 có thể cung cấp một số cấu hình của các

phương thức để thay đổi hành vi của đối tượng bản đồ

Theo mặc định, đối tượng bản đồ có xu hướng tác động trở lại người sử dụng như những gì nó làm trên trang http://maps.google.com Tuy nhiên, bạn có thể thay đổi hành vi này bằng một số phương thức

Bạn cũng có thể tương tác với bản đồ lập trình Đối tượng

GMap2 hỗ trợ một số phương thức để thay đổi trạng thái bản đồ trực

tiếp Ví dụ, các phương thức setCenter(), panTo và zoomIn() hoạt động trên bản đồ lập trình, hơn thế nữa thông qua sự tương tác người dùng

Ví dụ sau sẽ hiển thị một bản đồ và cung cấp một nút để bắt đầu một phương thức panTo, và canh giữa bản đồ tại một điểm cho trước Nếu điểm xác định nằm trong phần nhìn thấy của bản đồ thì bản đồ sẽ

“pan” một cách mượt mà (smoothly) đến điểm đó, ngược lại, bản đồ sẽ nhảy (jump) đến điểm đó

var map ;

function initialize () {

if ( GBrowserIsCompatible ()) {

var map = new GMap2 ( document getElementById ( "MyMap"));

map setCenter ( new GLatLng ( 37 4419 , - 122.1419 ), 13 );

1.3.8 Các cửa sổ thông tin (Info windows):

Mỗi bản đồ trong Google Maps API có thể hiển thị một "cửa sổ thông tin" (Info Window) của kiểu GInfoWindow mà nội dung HTML

sẽ hiển thị trong một cửa sổ nổi trên bản đồ Các cửa sổ thông tin trông giống như một bong bóng vui nhộn: nó có một vùng nội dung và một cái chân hình nêm, đầu nhọn của hình nêm là một điểm được xác định trên bản đồ Bạn có thể xem cửa sổ thông tin bằng cách nhấp chuột vào một điểm đánh dấu (marker) trên bản đồ.

Đối tượng GInfoWindow không có constructor Một cửa sổ thông tin được tự động tạo ra và kèm theo bản đồ khi bạn tạo bản đồ Bạn không thể hiển thị nhiều hơn một cửa sổ thông tin tại một thời điểm cho một bản đồ, nhưng bạn có thể di chuyển cửa sổ thông tin và thay đổi nội dung của nó khi cần thiết.

Đối tượng GMap2 cung cấp một phương thức openInfoWindow(), trong đó có một điểm và một phần tử HTML DOM làm đối số