Google Maps - Biểu tượng

Ngoài các điểm đánh dấu, đa giác, đường đa giác và các hình dạng hình học khác, chúng tôi cũng có thể thêm hình ảnh vectơ được xác định trước (ký hiệu) trên bản đồ. Chương này giải thích cách sử dụng các ký hiệu do Google Maps cung cấp.

Thêm một biểu tượng

Google cung cấp nhiều hình ảnh dựa trên vectơ (biểu tượng) có thể được sử dụng trên một điểm đánh dấu hoặc một đường đa giác. Cũng giống như các lớp phủ khác, để vẽ các ký hiệu được xác định trước này trên bản đồ, chúng ta phải khởi tạo các lớp tương ứng của chúng. Dưới đây là danh sách các ký hiệu được xác định trước do Google cung cấp và tên lớp của chúng -

Circle - google.maps.SymbolPath.CIRCLE
Backward Pointing arrow (closed) - google.maps.SymbolPath.BACKWARD_CLOSED_ARROW
Forward Pointing arrow (closed) - google.maps.SymbolPath.FORWARD_CLOSED_ARROW
Forward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE
Backward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE

Các biểu tượng này có các thuộc tính sau - path, fillColor, fillOpacity, scale, stokeColor, strokeOpacity và strokeWeight.

Thí dụ

Ví dụ sau minh họa cách vẽ các ký hiệu được xác định trước trên Google Map.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
					
               draggable:true,
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Nó tạo ra kết quả sau:

Hoạt hình biểu tượng

Cũng giống như các điểm đánh dấu, bạn cũng có thể thêm các hoạt ảnh như trả lại và thả vào các biểu tượng.

Thí dụ

Ví dụ sau đây cho thấy cách sử dụng một biểu tượng làm điểm đánh dấu trên bản đồ và thêm hoạt ảnh vào nó -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
               
               animation:google.maps.Animation.DROP,
               draggable:true,
               map: map
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Nó tạo ra kết quả sau: