Lập trình Google Maps API: Bài 2 – Vẽ đối tượng lên Google Maps (Overlays) - Lớp học Vi Tính - khóa học vi tính văn phòng

Các loại đối tượng sau đây có thể vẽ lên bản đồ Google Maps :

Marker (điểm đánh dấu) – tọa độ 01 điểm trên bản đồ. Điểm đánh dấu này có thể thay thế bằng 01 file hình.
Polyline ( các đường thẳng)
Polygon (hình đa giác) – là tập hợp các đường thẳng “khép kín”.
Hình tròn và hình chữ nhật
Info Windows – 01 cửa sổ popup hiển thị thông tin lên bản đồ.
Custom overlays

Các bạn nên thuộc tên các đối tượng Overlays bằng tiếng Anh để sau này có thể search hoặc đọc tài liệu trên site google developer.

1- Thêm điểm đánh dấu (Marker)

Phương thức Marker tạo ra 01 điểm đánh dấu mới trên bản đồ. (chú ý rằng phải thiết lập giá trị cho thuộc tính position).

Thêm điểm đánh dấu vào bản đồ bằng phương thức setMap()

var marker=new google.maps.Marker({
position:myCenter,
});

marker.setMap(map);

Mã đầy đủ HTML:

Ở đây tôi bê nguyên xi code của bài 1, chỉ thêm biến myCenter ở đầu chương trình + phần code hiển thị điểm đánh dấu (Marker).

2 - Làm điểm đánh dấu động (Animation)

thêm thuộc tính animation khi tạo đối tượng Marker

var marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);

Các bạn chú ý CHỮ HOA và chữ thường phải viết đúng.Vì bản chất Google Maps API là Java Script.

3 - Thay biểu tượng điểm đánh dấu bằng file hình ảnh

Ví dụ:

var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});

marker.setMap(map);

và đây là kết quả sau khi tôi thay hình:

Bạn có thể lấy file hình nào cũng được thay thế cho file pinball.png

4 - Vẽ đường đi (Polyline)

Polyline là đường được vẽ theo tọa độ và theo 1 trật tự nhất định.
Đường polyline có các thuộc tính:

path – hiển thị các tọa độ của đường.
strokeColor – hiển thị mã màu hệ 16 của nét vẽ (format: "#FFFFFF")
strokeOpacity – đọ trong suốt của nét vẽ (từ 0.0 -> 1.0)
strokeWeight – độ dày của nét tính bằng điểm ảnh(pixels) .
editable – nét vẽ có thể tùy chỉnh hay không (true/false)

var myTrip = [q1,q2,qThuDuc];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});

và đây là mã HTML đầy đủ

<html>

<head>

var myCenter = new google.maps.LatLng(10.789145, 106.735330);

var q1=new google.maps.LatLng(10.774904, 106.692294);

var q2=new google.maps.LatLng(10.764392, 106.777374);

var qThuDuc=new google.maps.LatLng(10.860266, 106.757903);

function initialize() {

var mapProp = {

center:myCenter,

zoom:12,

mapTypeId:google.maps.MapTypeId.ROADMAP

};

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var myTrip = [q1,q2,qThuDuc];

var flightPath = new google.maps.Polyline({

path:myTrip,

strokeColor:"#0000FF",

strokeOpacity:0.8,

strokeWeight:4

});

flightPath.setMap(map);

}

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

</script>

</head>

<body>

</body>

</html>

Kết quả trình duyệt sẽ vẽ ra 1 đường “chim bay” như sau:

5 - Vẽ hình đa giác (POLYGON)

1 đối tượng POLYGON có các thuộc tính sau:

path – thể hiện các tọa độ của nét vẽ (điểm đầu và điểm cuối phải trùng nhau)
strokeColor – màu nét vẽ định dạng số hệ 16
strokeOpacity – độ trong suốt của nét vẽ (từ 0.0 -> 1.0)
strokeWeight – xác định độ dày của nét vẽ tính bằng điểm ảnh(pixels).
fillColor – tô màu bên trong hình đa giác(định dạng: "#FFFFFF")
fillOpacity – độ trong suốt bên trong hình đa giác (từ 0.0 -> 1.0)
editable – xác định user có thể tùy chỉnh hay k (true/false)

Ví dụ:

var myTrip = [q1,q2,qThuDuc,q1];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});

Các bạn chú ý mình chỉ thêm vào phần CODE màu xanh đọt chuối để khép kín hình tam giác, và kết quả như sau:

Nếu thêm thuộc tính editable:true => hình tam giác sẽ có các dấu chấm xung quanh để điều chỉnh được hình dạng.
6 - Vẽ hình tròn (Circle)
1 hình tròn có các thuộc tính sau:

center – tọa độ tâm điểm của hình tròn.
radius – bán kính hình tròn tính bằng mét.
strokeColor – màu nét vẽ định dạng số hệ 16
strokeOpacity – độ trong suốt của nét vẽ (từ 0.0 -> 1.0)
strokeWeight – xác định độ dày của nét vẽ tính bằng điểm ảnh(pixels).
fillColor – tô màu bên trong hình đa giác(định dạng: "#FFFFFF")
fillOpacity – độ trong suốt bên trong hình đa giác (từ 0.0 -> 1.0)
editable – xác định user có thể tùy chỉnh hay k (true/false)

Ví du:

var myCity = new google.maps.Circle({
center:q1,
radius:2000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});

Xem hình:

7 - Tạo cửa số POPUP InfoWindow

Ví dụ hiển thị InfoWindow với ô chứa nội dung cho 01 điểm Marker trên bản đồ:

var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});

infowindow.open(map,marker);

và sau đây là toàn bộ code HTML
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"> </script>
<script>
var myCenter = new google.maps.LatLng(10.789145, 106.735330);
function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker = new google.maps.Marker({
position:myCenter,
});

var infowindow = new google.maps.InfoWindow({
content:"lophocvitinh.com!"
});
marker.setMap(map);
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

Kết quả sẽ được như sau:

Tôi xin kết thúc bài học các đối tượng Overlays ở đây.

NTM Solutions

Lớp học Vi Tính

Thứ Tư, 24 tháng 8, 2016

Lập trình Google Maps API: Bài 2 – Vẽ đối tượng lên Google Maps (Overlays)

Không có nhận xét nào:

Đăng nhận xét