Hướng dẫn tạo Polylines và Polygons - Google API

Tác giả: Phạm Lê Tấn Đạt

Mục đích: Nội dung của chủ đề này giúp tìm hiểu về 02 overlays cơ bản Google Maps JavaScript API. Qua đó, chúng tôi sẽ thực hiện các ví dụ để áp dụng các khái niệm này

Yêu cầu

• Nắm vững các khái niệm về HTML và javascript cơ bản

• Đã sử dụng qua javascript

• Đã nắm vững kiến thức cơ bản và thực hiện hoàn tất nội dung bài “Google API – Tạo một bản đồ trên web với Google Maps API”

• Tools sử dụng ở đây là Netbeans 6.9.1

• JDK 6 update 22

• Server: Tomcat 6.0.26

Một số khái niệm cơ bản

• Polylines

  • Là một chuỗi các đường thẳng được kết nối từ các điểm và hiển thị trên bản đồ

  • Để hiển thị một polyline trên bản đồ, chúng ta phải truyền vào hàm dựng của nó 1 polylineOptions, polylineOptions có các tham số cụ thể như sau

    • path: là một mảng chứa các đối tượng LatLong (LatLong là các điểm mà đường thẳng sẽ đi qua)

    • strokeColor: là 1 mã màu với hệ số hexa của HTML giúp đại diện màu hiển thị của polyline

    • strokeOpacity: là 1 số từ 0.0 đến 1.0 biểu hiện cho độ mờ của polyline

    • strokeWeight: là 1 số nguyên dương biểu hiện cho độ rộng của polyline được tính theo pixels

• Polygons

  • Là 1 mảng chứa các tọa độ được săp xếp tương tự như polylines

  • Tuy nhiên, thay vì có điểm bắt đầu và điểm kết thúc, Polygon tự nối điểm đầu và điểm cuối lại thành 1 vùng khép kín. Cho nên, Polygons được dùng để vẽ các hình thù phức tạp chẳng hạn như 1 hòn đảo.

  • polygonOptions cũng có thêm 2 tham số mới so với polylineOptions, cụ thể

    • fillColor: là mã màu theo hệ số hexa dùng trong HTML biểu hiện cho màu hiển thị của vùng bên trong polygon

    • fillOpacity: là số từ 0.0 đến 1.0 biểu hiện cho độ mờ của vùng bên trong polygon

Các bước thực hiện

• Chúng ta sẽ sử dụng lại project đã được làm trong bài “Google API – Tạo một bản đồ trên web với Google Maps API” để mở rộng và áp dụng 02 khái niệm về overlays cơ bản đã nêu ra ở trên

• Chúng ta vào trong hàm initialize() đã có trên trang index.jsp, bổ sung một mảng tên flightPlanCoordinates chứa các tọa độ điểm ở khu vực gần thành phố HCM, cụ thể

• Tiếp theo, chúng ta tạo 01 polylineOptions với các thông số là màu đỏ, độ mờ là 1 và rộng 2 pixels, và tham chiếu đến mảng tọa độ vừa khai báo

• Chúng ta, tiếp tục thực hiện một polyline hoàn chỉnh

• Trong hình trên, hàm setMap truyền vào đối tượng map mà polyline sẽ hiển thị lên. Ở đây ta dùng lại map ở bài “Google API – Tạo một bản đồ trên web với Google Maps API”

• Code tổng quát sau khi chúng ta bổ sung các nội dung nêu trên

• Thực hiện clean and Build ứng dụng, deploy và chạy ứng dụng, chúng ta nhận được kêt quả như sau trên trình duyệt

• Một số nội dung mở rộng của polyline

  • Trong Polyline,  phương thức getPath() hàm hỗ trợ lấy về mảng chứa các tọa độ path theo kiểu MVCArray

    • (tham khảo MVCArray tại đâyhttps://developers.google.com/maps/documentation/javascript/reference#MVCArray)

  • Từ kiểu dữ liệu MVCArray chúng ta có các hàm getAt(), insertAt(), removeAt() để thao tác với các phần tử của mảng tọa độ

  • Ví dụ

    • Hàm getAt, bổ sung vào trong hàm initialize()

• Chúng ta nhận được kết quả thực thi

• Bổ sung hàm removeAt()

• Kết quả nhận được

• Bổ sung hàm insertAt

• Kết quả nhận được

• Chúng ta thực hiện áp dụng lý thuyết của polygons bổ sung vào nội dung đang thực hiện trong các bước trên, cụ thể như sau

• Chúng ta thực hiện chạy chương trình với kết quả

• Chúng ta nhận thấy rằng mảng flightPlanCoordinates không có điểm cuối giống như của polyline, nhưng kết quả chúng ta nhận được khi chương trình thực thi vẫn ra hình tam giác.

• Tương tự như polylines, polygons cũng có hàm getPath() và cách thực hiện tương tự như polines (quí vị tự thực hiện lấy để thấy được kết quả)

Chúc mừng các bạn, chúng ta đã hoàn tất xong việc tiếp cận 02 overlays cơ bản của Google Map API và sử dụng chúng trực tiếp trên bảng đồ

Rất mong sự góp ý chân thành của các bạn và hẹn các bạn trong bài tiếp theo liên quan đến google API, cụ thể là các thành phần overlay quan trọng tiếp theo thường được sử dụng trên google API như là marker, info windows.