Bài 3: Chồng xếp bản đồ trong google maps

Xem ví dụ về chồng xếp bản đồ


Thêm một đối tượng chỉ vị trí lên trên bản đồ Google:


Chồng xếp trong Google Maps

Chồng xếp là cách đặt các đối tượng trên bản đồ tại các toạ  độ kinh độ/vĩ độ (longitude/latitude) giới hạn nào đó được .

Google Maps có nhiều kiểu chồng xếp:

  • Điểm đánh dấu (Marker) – Các địa điểm trên bản đồ. Các điểm đánh dấu này có thể được hiển thị bằng một ảnh icon.
  • Kiểu đường (Polyline) – Dãy các đường thẳng trên bản đồ.
  • Kiểu vùng (Polygon) – Dãu các đường thẳng trên bản đồ và tạo thành hình khép kín.
  • Hình tròn (Circle) và Hình chữ nhật (Rectangle)
  • Cửa số thông báo (Info Windows) – Hiển thị nội dung trong một popup trên một bản đồ.
  • Chồng xếp tuỳ chỉnh

Google Maps – Thêm điểm đánh dấu (Marker)

Hàm khởi dựng marker được tạo bởi đối tượng Marker. (Chú ý rằng thuộc tính vị trí phải được thiết lập để maker hiển thị)

Thêm một marker tới bản đồ thì sử dụng phương thức setMap():

Ví dụ

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

Google Maps – Hoạt ảnh cho Marker

Ví dụ dưới hiển thị hoạt ảnh cho maker sử dụng thuộc tính animation:

Ví dụ:

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

Google Maps – Icon thay cho Marker

Ví dụ bên dưới chỉ định một ảnh (icon) được sử dụng đề thay thế biểu tượng marker mặc định:

Ví dụ

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

Google Maps – Kiểu đường (Polyline)

Một Polyline là một đường thẳng được vẽ thông qua một dãy các cặp toạ độ theo thứ tự tuần tự.
Một polyline hỗ chợ các thuộc tính sau:

  • path – xác định nhiều các cặp toạ độ vĩ độ/kinh độ latitude/longitude cho đường
  • strokeColor – xác định màu sắc cho đường này ( định dạng: “#FFFFFF”)
  • strokeOpacity – xác định độ trong suốt của đường (giá trị nằm trong khoảng từ 0.0 tới 1.0)
  • strokeWeight – xác định độ rộng của đường
  • editable – cho phép đường này có thể được chỉnh sửa bởi người dùng hay không (true/false)

Ví dụ

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:“#0000FF”,
strokeOpacity:0.8,
strokeWeight:2
});

Google Maps – Kiểu vùng (Polygon)

Một Polygon là tương tự như một Polyline mà bao gồm một dãy các cặp toạ độ theo tuần tự, tuy nhiên điểm đầu và điểm cuối phải trùng nhau hay nó phải có tính chất tạo vùng.
Một polygon hỗ trợ các thuộc tính sau:

  • path – chỉ định dãy toạ độ LatLng cho đường (toạ độ đầu và cuối là giống nhau)
  • strokeColor – chỉ định màu cho đường (định dạng: “#FFFFFF”)
  • strokeOpacity – chỉ định độ trong suốt của đường (giá trị từ 0.0 tới 1.0)
  • strokeWeight – chỉ định độ rộng của đường theo đơn vị pixel
  • fillColor – chỉ định màu của vùng bên trong (định dạng: “#FFFFFF”)
  • fillOpacity – chỉ định độ trọng suốt bên trọng polygon (giá trị từ 0.0 tới 1.0)
  • editable – xác định người dùng có thể chỉnh sửa hay không (true/false)

Ví dụ

var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:“#0000FF”,
strokeOpacity:0.8,
strokeWeight:2,
fillColor:“#0000FF”,
fillOpacity:0.4
});

Google Maps – Vòng tròn (Circle)

Một circle hỗ trợ các thuộc tính sau:

  • center – chỉ định vị trí tâm của hình tròn, sử dụng đối tượng google.maps.LatLng
  • radius – chỉ định bán kính của hình tròn theo đơn vị mét
  • strokeColor – Chỉ định kiểu màu cho đường (theo định dạng hexa: “#FFFFFF”)
  • strokeOpacity – Chỉ định độ trong suốt của đường (giá trị nằm trong khoảng 0.0 tới 1.0)
  • strokeWeight – chỉ định độ rộng của đường theo đơn vị pixels
  • fillColor – chỉ định màu trong hình tròn (định dạng: “#FFFFFF”)
  • fillOpacity – chỉ định độ trong suốt trong hình tròn (giá trị từ 0.o tới 1.o)
  • editable – xác định hình tròn có được chỉnh sửa bởi người dùng (true/false)

Ví dụ

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

Google Maps – Cửa sổ thông tin (InfoWindow)

Hiển thị một InfoWindow với nội dung văn bản và một maker:

Ví dụ

var infowindow = new google.maps.InfoWindow({
content:“Hello World!”
});
infowindow.open(map,marker);

Google Maps – Tham khảo thêm về chồng xếp

Tham khảo thư viện Google Maps API


Code tham khảo toàn bộ các ví dụ phần trên

Bạn có thể download toàn bộ code ở đây rồi thay đổi các tham số để xem kết quả.


Có thể bạn sẽ thích…

Bình luận

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *