Lớp phủ Google Maps
Google Maps - Lớp phủ
Lớp phủ là các đối tượng trên bản đồ được ràng buộc với các 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 các đường thẳng trên bản đồ
- Đa giác - Một loạt các đường thẳng trên bản đồ và hình dạng là "đóng"
- Hình tròn và Hình chữ nhật
- Windows thông tin - 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 ra 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 ():
Thí 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ụ dưới đây cho thấy cách tạo hoạt ảnh cho điểm đánh dấu bằng thuộc tính hoạt ảnh:
Thí 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 vì điểm đánh dấu mặc định:
Thí 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ẽ qua một chuỗi các tọa độ theo một trình tự có thứ tự.
Một polyline hỗ trợ các thuộc tính sau:
- path - 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")
- strokeOpacity - chỉ định độ mờ của đườ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 dòng có thể được chỉnh sửa bởi người dùng hay không (đúng / sai)
Thí 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 các tọa độ theo một trình tự có 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 là "đóng" (tất cả các đường nối lên).
Đa giác hỗ trợ các thuộc tính sau:
- path - chỉ định một số tọa độ LatLng cho đườ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")
- strokeOpacity - chỉ định độ mờ của đườ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 được bao gồm (định dạng: "#FFFFFF")
- fillOpacity - chỉ định độ mờ của màu tô (giá trị từ 0,0 đến 1,0)
- có thể chỉnh sửa - xác định xem dòng có thể được chỉnh sửa bởi người dùng hay không (đúng / sai)
Thí 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 kết nối
Một vòng tròn hỗ trợ các thuộc tính sau:
- center - chỉ định google.maps.LatLng của tâm hình 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 dòng xung quanh hình tròn (định dạng: "#FFFFFF")
- strokeOpacity - chỉ định độ mờ của màu nét (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 bên trong vòng tròn (định dạng: "#FFFFFF")
- fillOpacity - chỉ định độ mờ của màu tô (giá trị 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 kết nối hay không (true / false)
Thí 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 - InfoWindow
Hiển thị một InfoWindow với một số nội dung văn bản cho một điểm đánh dấu:
Thí dụ
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);