Google Map Shapes - Polylines (vẽ đường thẳng)

Đôi lúc trong ứng dụng google map ta cần vẽ một số hình dạng để nhấn mạnh một địa điểm nào đó. Một hình dạng ta gọi là một đối tượng nằm trong bản đồ và được xác định bởi nhiều vĩ độ/kinh độ kết hợp với nhau tạo thành một hình. Các hình dạng đó có thể là đường thẳng, hình trong, hình đa giác và hình chữ nhật (lines, polygons, circles and rectangles). Ngoài ra bạn còn có thể cho phép người dùng di chuyển và kéo dãn các đối tượng này trên bản đồ.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Trong bài này chúng ta sẽ tìm hiểu cách vẽ đường thẳng trên bản đồ trước (How to draw a line on google map). Như tôi đã trình bày, để vẽ đối tượng nào thì chúng ta sẽ sử dụng chính đối tượng đó (ví dụ vẻ marker thì ta dùng đối tượng Marker google map), để vẽ đường thẳng thì ta dùng đối tượng Polyline google map, đối tượng này chứa danh sách các địa chỉ vĩ độ và kinh độ được lưu trong một mảng, dựa vào mảng này Polilines sẽ hiển thị trên bản đồ.

1. Thêm một đường thẳng trên google map (Add a polyline)

Đối tượng Polyline được khởi tạo bởi những PolylineOptions, những PolylineOptions bao gồm các thông số vĩ độ/kinh độ và các tùy chọn hiển thị. Bạn có thể tùy chọn hiển thị màu sắc, định dạng, hình mờ ... Dưới đây là danh sách các Options của Polyline:

strokeColor Quy định màu của đường thẳng, được tính theo mã màu thập lục phân d.
strokeOpacity độ trong suốt của đường thẳng, nằm trong khoảng từ 0 -> 1, mặc định là 1.
strokeWeight Chiều rộng của đường thẳng, tính theo pixels.

Các PolylineOptions có các thông số cấu hình cho phép người dùng di chuyển, kéo thả, và để gắn đối tượng Polyline vào bản đồ thì ta sẽ dùng hàm setMap().,chi tiết xem tại đây. Để rõ ràng hơn các bạn xem ví dụ dưới đây:

Bài viết này được đăng tại [free tuts .net]

Trong ví dụ này sẽ tạo ra một đường thẳng màu đen và rông 4 pixels với các vĩ độ và kinh độ xác định cho trước.

Xem demo:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Simple Polylines</title>
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
            }
        </style>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfNk5eVWmQB9e6ApnWzICLNIY5lUXpOBw&language=vi"></script>
        <script>
            
            function initialize() 
            {
                var mapOptions = {
                    zoom: 3,
                    center: new google.maps.LatLng(0, -180),
                    mapTypeId: google.maps.MapTypeId.TERRAIN
                };

                var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                
                // Các tọa độ của đường thẳng sẽ đi qua
                var flightPlanCoordinates = [
                    new google.maps.LatLng(37.772323, -122.214897),
                    new google.maps.LatLng(21.291982, -157.821856),
                    new google.maps.LatLng(-18.142599, 178.431),
                    new google.maps.LatLng(-27.46758, 153.027892)
                ];
                
                // Tạo polyline
                var flightPath = new google.maps.Polyline({
                    path: flightPlanCoordinates,
                    geodesic: true,
                    strokeColor: '#FFFFFF',
                    strokeOpacity: 1.0,
                    strokeWeight: 4
                });
                
                // Dùng hàm setMap để gắn vào bản đồ
                flightPath.setMap(map);
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>

2. Xóa đường thẳng đã vẽ ra khỏi bản đồ (Remove a polyline)

Để xóa đường thẳng ra khỏi bản đồ thì cách làm cũng tương tự như Marker, ta sẽ thiết lập giá trị null cho hàm setMap(null). Sau khi thiết lập null thì đường thẳng này không mất, nó chỉ bị ẩn đi thôi, nếu bạn muốn nó mất luôn thì hãy gán giá trị của đối tượng polyline hiện tại bằng null.

Ví dụ:

// Xóa ra khỏi bản đồ hiện tại
flightPath.setMap(null);

// Xóa luôn khỏi bộ nhớ
flightPath = null;

3. Xử lý đường thẳng đã vẽ (Inspect a polyline)

Một đường thẳng vẽ trên bản đồ được xác định bởi vĩ độ và tung độ, như vậy ta có thể lấy được tọa độ tại một điểm trong đường thẳng đã vẽ bởi hàm getPath(), hàm này sẽ trả về một mảng array chứa danh sách các tọa độ. Sau đây là danh sách các hàm thao tác lên đường thẳng:

getAt() trả về đối tượng chứa vĩ độ và kinh độ.
insertAt() Chèn một vị trí vào đối tượng đường thẳng.
removeAt() Xóa một ví trí nào đó trong đường thẳng.

Các tham số đều là vĩ độ và kinh độ.

Ví dụ: Xem demo

Trong ví dụ này khi click (Google map events) vào bản đồ sẽ tạo các Marker, và khi click từ marker thứ 2 trở đi sẽ tạo một đường thẳng nối hai điểm đó lại với nhau

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Complex Polylines</title>
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
            }
        </style>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfNk5eVWmQB9e6ApnWzICLNIY5lUXpOBw&language=vi"></script>
        <script>
            // Đườn thẳng
            var poly;
            
            // Bản đồ
            var map;

            function initialize() 
            {
                // Thông số tạo bảng đồ
                var mapOptions = {
                    zoom: 7,
                    center: new google.maps.LatLng(41.879535, -87.624333)
                };
                
                // Tạo bản đồ
                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                
                // Thông số tạo Polyline
                // chưa xác định tạo độ các điểm vẽ
                var polyOptions = {
                    strokeColor: '#000000',
                    strokeOpacity: 1.0,
                    strokeWeight: 3
                };
                
                // Tạo Poluline mới
                poly = new google.maps.Polyline(polyOptions);
                
                // Và gắn vào bản đồ
                poly.setMap(map);

                // Khi click vào bản đồ thì gọi đến hàm addLatLng
                google.maps.event.addListener(map, 'click', addLatLng);
            }

            // Làm xử lý 
            function addLatLng(event) {
                
                // Lấy danh sách tọa độ hiện tại của đường thẳng
                var path = poly.getPath();

                // Thêm một tọa độ mới (vừa click) vào danh sách
                path.push(event.latLng);

                // Tạo marker
                var marker = new google.maps.Marker({
                    position: event.latLng,
                    title: '#' + path.getLength(),
                    map: map
                });
            }

            google.maps.event.addDomListener(window, 'load', initialize);

        </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>

4. Customize a polyline

Phần này tôi sẽ để dành bổ sung sau, tại vì nó liên quan đến bài mà chúng ta chưa học

5. Lời kết

Qua bài Google Map Shapes - Polylines này tôi mới thấy làm việc với google map rất đơn giản, nó không phức tạp như ta nghĩ, chỉ cần bạn nắm chắc được lý thuyết cách sử dụng, hiểu được một số ví dụ trong bài là mọi thứ trở nên dễ như ăn ớt vậy đó.

Bài trước Bài sau

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

Google Map Shapes - Polylines (vẽ đường thẳng)

1. Thêm một đường thẳng trên google map (Add a polyline)

2. Xóa đường thẳng đã vẽ ra khỏi bản đồ (Remove a polyline)

3. Xử lý đường thẳng đã vẽ (Inspect a polyline)

4. Customize a polyline

5. Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Google Map Shapes - Polylines (vẽ đường thẳng)

1. Thêm một đường thẳng trên google map (Add a polyline)

2. Xóa đường thẳng đã vẽ ra khỏi bản đồ (Remove a polyline)

3. Xử lý đường thẳng đã vẽ (Inspect a polyline)

4. Customize a polyline

5. Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Giới thiệu

Thủ thuật

Link hay

Liên kết

Phân biệt prototype và proto trong JavaScript