Lớp phủ Google Maps
Google Maps - Lớp phủ
Lớp phủ là các đối tượng trên bản đồ được liên kết với tọa độ vĩ độ/kinh độ.
Google Maps có một số loại lớp phủ:
- Điểm đánh dấu - Các vị trí đơn lẻ trên bản đồ. Điểm đánh dấu cũng có thể hiển thị hình ảnh biểu tượng tùy chỉnh
- Polyline - Chuỗi đường thẳng trên bản đồ
- Đa giác - Chuỗi các đường thẳng trên bản đồ và hình dạng được "đóng"
- Hình tròn và hình chữ nhật
- Thông tin Windows - Hiển thị nội dung trong bong bóng bật lên trên bản đồ
- Lớp phủ tùy chỉnh
Google Maps - Thêm điểm đánh dấu
Hàm tạo Marker tạo một điểm đánh dấu. Lưu ý rằng thuộc tính vị trí phải được đặt để điểm đánh dấu hiển thị.
Thêm điểm đánh dấu vào bản đồ bằng cách sử dụng phương thức setMap():
Ví dụ
var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);Google Maps - Tạo hiệu ứng cho điểm đánh dấu
Ví dụ bên dưới cho thấy cách tạo hiệu ứng cho điểm đánh dấu bằ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 - Biểu tượng thay vì điểm đánh dấu
Ví dụ bên dưới chỉ định một hình ảnh (biểu tượng) để sử dụng thay cho điểm đánh dấu mặc định:
Ví dụ
var marker = new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);Google Maps - Polyline
Polyline là một đường được vẽ thông qua một loạt tọa độ theo trình tự có thứ tự.
Một polyline hỗ trợ các thuộc tính sau:
- đường dẫn - chỉ định một số tọa độ vĩ độ/kinh độ cho đường
- StrokeColor - chỉ định màu thập lục phân cho dòng (định dạng: "#FFFFFF")
- đột quỵOpacity - chỉ định độ mờ của dòng (giá trị từ 0,0 đến 1,0)
- StrokeWeight - chỉ định trọng lượng của nét vẽ bằng pixel
- có thể chỉnh sửa - xác định xem người dùng có thể chỉnh sửa dòng này hay không (đúng/sai)
Ví dụ
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ư Đa giác ở chỗ nó bao gồm một chuỗi tọa độ theo thứ tự. Tuy nhiên, đa giác được thiết kế để xác định các vùng trong một vòng khép kín.
Đa giác được tạo thành từ các đường thẳng và hình dạng "đóng" (tất cả các đường nối với nhau).
Một đa giác hỗ trợ các thuộc tính sau:
- đường dẫn - chỉ định một số tọa độ LatLng cho dòng (tọa độ đầu tiên và cuối cùng bằng nhau)
- StrokeColor - chỉ định màu thập lục phân cho dòng (định dạng: "#FFFFFF")
- đột quỵOpacity - chỉ định độ mờ của dòng (giá trị từ 0,0 đến 1,0)
- StrokeWeight - chỉ định trọng lượng của nét vẽ bằng pixel
- fillColor - chỉ định màu thập lục phân cho vùng trong vùng kèm theo (định dạng: "#FFFFFF")
- fillOpacity - chỉ định độ mờ của màu tô (giá trị trong khoảng từ 0,0 đến 1,0)
- có thể chỉnh sửa - xác định xem người dùng có thể chỉnh sửa dòng này hay không (đúng/sai)
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
Vòng tròn hỗ trợ các thuộc tính sau:
- center - chỉ định google.maps.LatLng của tâm vòng tròn
- bán kính - chỉ định bán kính của hình tròn, tính bằng mét
- StrokeColor - chỉ định màu thập lục phân cho đường xung quanh vòng tròn (định dạng: "#FFFFFF")
- StrokeOpacity - chỉ định độ mờ của màu nét (giá trị trong khoảng từ 0,0 đến 1,0)
- StrokeWeight - chỉ định trọng lượng của nét vẽ bằng pixel
- fillColor - chỉ định màu thập lục phân cho vùng trong vòng tròn (định dạng: "#FFFFFF")
- fillOpacity - chỉ định độ mờ của màu tô (giá trị trong khoảng từ 0,0 đến 1,0)
- có thể chỉnh sửa - xác định xem người dùng có thể chỉnh sửa vòng tròn hay không (đúng/sai)
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 - Thông tinWindow
Hiển thị InfoWindow với một số nội dung văn bản cho điểm đánh dấu:
Ví dụ
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);