NTM Solutions

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)

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>
<script src="http://maps.googleapis.com/maps/api/js"> </script>
<script>
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>
<div id="googleMap" style="width:500px;height:380px;"></div>
</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.