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

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ả.