Lớp叠加 Google Maps

Google Maps - Lớp phủ

Lớp phủ là đối tượng được gắn kết với tọa độ vĩ độ/kinh độ trên bản đồ.

Google Maps có nhiều loại lớp phủ:

• Dấu hiệu (Marker) - Một vị trí duy nhất trên bản đồ. Dấu hiệu cũng có thể hiển thị hình ảnh biểu tượng tùy chỉnh
• Đường thẳng (Polyline) - Một loạt các đường thẳng trên bản đồ
• Đa giác (Polygon) - Một loạt các đường thẳng trên bản đồ, có hình dạng "mở"
• Tròn và vuông (Circle và Rectangle)
• Cửa sổ thông tin (Info Windows) - Hiển thị nội dung trong bong bóng ở trên cùng của bản đồ
• Lớp phủ tùy chỉnh (Custom overlays)

Google Maps - Thêm dấu hiệu

Hàm tạo Marker có thể tạo ra dấu hiệu. Lưu ý rằng bạn phải thiết lập thuộc tính position để hiển thị dấu hiệu.

Vui lòng sử dụng phương thức setMap() để thêm dấu hiệu vào bản đồ:

thực thể

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

Google Maps - Hiệu ứng động dấu hiệu

Dưới đây là ví dụ về cách sử dụng thuộc tính animation để thiết lập hiệu ứng động cho dấu hiệu:

thực thể

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

Google Maps - Thay thế dấu hiệu bằng biểu tượng

Dưới đây là ví dụ về việc quy định hình ảnh ( biểu tượng ) cần sử dụng để thay thế dấu hiệu mặc định:

thực thể

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

Google Maps - Đường thẳng

Đường thẳng được vẽ bằng cách sắp xếp một loạt các tọa độ theo thứ tự.

Đường thẳng hỗ trợ các thuộc tính sau:

• path - Định nghĩa một số tọa độ vĩ độ/kinh độ của đường
• strokeColor - Định nghĩa màu đường (định dạng: "#FFFFFF")
• strokeOpacity - Định nghĩa độ không mờ của đường
• strokeWeight - Định nghĩa độ dày của đường viền (theo pixel)
• editable - Định nghĩa dòng có thể được người dùng chỉnh sửa (true/false)

thực thể

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

Google Maps - Đa giác

Đa giác tương tự như đường折, nó được tạo thành từ một loạt các tọa độ được sắp xếp theo thứ tự. Tuy nhiên, đa giác được thiết kế để định nghĩa khu vực trong đóng kín.

Đa giác được tạo thành từ các đường thẳng và có hình dạng "đóng kín" (tất cả các đường đều kết nối lại với nhau).

Đa giác hỗ trợ các thuộc tính sau:

• path - Định nghĩa các tọa độ vĩ độ/kinh độ của đường (tọa độ đầu tiên và cuối cùng bằng nhau)
• strokeColor - Định nghĩa màu đường (định dạng: "#FFFFFF")
• strokeOpacity - Định nghĩa độ không mờ của đường
• strokeWeight - Định nghĩa độ dày của đường viền (theo pixel)
• fillColor - Định nghĩa màu lấp đầy của khu vực trong đóng kín (định dạng: "#FFFFFF")
• fillOpacity - Định nghĩa độ không mờ của màu lấp đầy (giá trị từ 0.0 đến 1.0)
• editable - Định nghĩa dòng có thể được người dùng chỉnh sửa (true/false)

thực thể

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 - Hình tròn

Hình tròn hỗ trợ các thuộc tính sau:

• center - Định nghĩa tâm của google.maps.LatLng
• radius - Định nghĩa bán kính của hình tròn, theo mét
• strokeColor - Định nghĩa màu đường viền của hình tròn (định dạng: "#FFFFFF")
• strokeOpacity - Định nghĩa độ không mờ của màu đường viền (giá trị từ 0.0 đến 1.0)
• strokeWeight - Định nghĩa độ dày của đường viền (theo pixel)
• fillColor - Định nghĩa màu lấp đầy của hình tròn trong (định dạng: "#FFFFFF")
• fillOpacity - Định nghĩa độ không mờ của màu lấp đầy (giá trị từ 0.0 đến 1.0)
• editable - Định nghĩa người dùng có thể chỉnh sửa hình tròn (true/false)

thực thể

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

hiển thị thông tin cửa sổ với nội dung văn bản cho marker:

thực thể

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