Ký hiệu (Biểu tượng dựa trên vectơ)

  1. Giới thiệu
  2. Thuộc tính của biểu tượng
  3. Ký hiệu được xác định trước
  4. Thêm biểu tượng vào điểm đánh dấu
  5. Thêm biểu tượng vào đường đa tuyến
  6. Tạo ảnh động cho một biểu tượng

Giới thiệu

Symbol là một biểu tượng dựa trên vectơ có thể hiển thị trên đối tượng Marker hoặc Polyline. Hình dạng của biểu tượng được xác định bằng một đường dẫn sử dụng ký hiệu đường dẫn SVG. Mặc dù path là thuộc tính bắt buộc duy nhất, nhưng đối tượng Symbol hỗ trợ nhiều thuộc tính cho phép bạn tuỳ chỉnh các khía cạnh hình ảnh, chẳng hạn như màu sắc và độ đậm của nét vẽ và màu nền. Xem danh sách thuộc tính.

Có một số ký hiệu được xác định trước thông qua lớp SymbolPath. Xem danh sách dưới đây.

Thuộc tính của ký hiệu

Xin lưu ý rằng hành vi mặc định của Symbol sẽ thay đổi một chút tuỳ thuộc vào việc hành vi đó xuất hiện trên điểm đánh dấu hay đường đa tuyến. Các biến thể này được mô tả trong danh sách thuộc tính bên dưới.

Symbol hỗ trợ các thuộc tính sau:

  • path (bắt buộc) là đường dẫn xác định hình dạng của biểu tượng. Bạn có thể sử dụng một trong các đường dẫn được xác định trước trong google.maps.SymbolPath hoặc xác định một đường dẫn tuỳ chỉnh bằng cách sử dụng ký hiệu đường dẫn SVG. Lưu ý: Đường dẫn vectơ trên một đường đa tuyến phải vừa với hình vuông 22x22px. Nếu đường dẫn của bạn bao gồm các điểm nằm ngoài hình vuông này, thì bạn phải điều chỉnh thuộc tính scale của biểu tượng thành một giá trị phân đoạn, chẳng hạn như 0,2, để các điểm được điều chỉnh theo tỷ lệ thu được vừa với hình vuông.
  • anchor đặt vị trí của biểu tượng tương ứng với điểm đánh dấu hoặc đường đa tuyến. Toạ độ của đường dẫn biểu tượng được dịch sang trái và lên trên theo toạ độ x và y của neo tương ứng. Theo mặc định, một biểu tượng được neo tại (0, 0). Vị trí được biểu thị trong cùng một hệ toạ độ với đường dẫn của biểu tượng.
  • fillColor là màu của phần tô của biểu tượng (tức là vùng được viền bởi nét vẽ). Tất cả màu CSS3 đều được hỗ trợ ngoại trừ màu được đặt tên mở rộng. Đối với các ký hiệu trên điểm đánh dấu, giá trị mặc định là "đen". Đối với các ký hiệu trên hình nhiều đường, giá trị mặc định là màu nét của hình nhiều đường tương ứng.
  • fillOpacity xác định độ mờ tương đối (tức là thiếu độ trong suốt) của phần tô của biểu tượng. Các giá trị dao động từ 0.0 (hoàn toàn trong suốt) đến 1.0 (hoàn toàn mờ đục). Giá trị mặc định là 0.0.
  • rotation là góc xoay biểu tượng, được biểu thị theo chiều kim đồng hồ tính bằng độ. Theo mặc định, điểm đánh dấu biểu tượng có góc xoay là 0 và biểu tượng trên một đa tuyến được xoay theo góc của cạnh mà biểu tượng đó nằm trên đó. Việc đặt độ xoay của một ký hiệu trên một đa tuyến sẽ khắc phục độ xoay của ký hiệu đó để ký hiệu không còn tuân theo đường cong của đường.
  • scale đặt số lượng theo tỷ lệ kích thước của biểu tượng. Đối với điểm đánh dấu biểu tượng, tỷ lệ mặc định là 1. Sau khi điều chỉnh theo tỷ lệ, ký hiệu có thể có kích thước bất kỳ. Đối với các ký hiệu trên một đa tuyến, tỷ lệ mặc định là độ đậm nét của đa tuyến. Sau khi điều chỉnh theo tỷ lệ, biểu tượng phải nằm bên trong hình vuông 22x22px, căn giữa tại neo của biểu tượng.
  • strokeColor là màu của đường viền biểu tượng. Tất cả màu CSS3 đều được hỗ trợ ngoại trừ màu được đặt tên mở rộng. Đối với các ký hiệu trên điểm đánh dấu, giá trị mặc định là "đen". Đối với các ký hiệu trên một đa tuyến, màu mặc định là màu nét của đa tuyến.
  • strokeOpacity xác định độ mờ tương đối (tức là thiếu độ trong suốt) của nét của biểu tượng. Các giá trị dao động từ 0.0 (hoàn toàn trong suốt) đến 1.0 (hoàn toàn mờ đục). Đối với điểm đánh dấu biểu tượng, giá trị mặc định là 1.0. Đối với các biểu tượng trên đường đa tuyến, giá trị mặc định là độ mờ nét của đường đa tuyến.
  • strokeWeight xác định độ đậm của đường viền của biểu tượng. Giá trị mặc định là scale của biểu tượng.

Ký hiệu được xác định trước

API JavaScript của Maps cung cấp một số biểu tượng tích hợp mà bạn có thể thêm vào điểm đánh dấu hoặc đa tuyến thông qua lớp SymbolPath.

Các ký hiệu mặc định bao gồm một vòng tròn và hai loại mũi tên. Có cả mũi tên hướng về phía trước và mũi tên hướng về phía sau. Điều này đặc biệt hữu ích đối với các đường đa tuyến vì hướng của biểu tượng trên đường đa tuyến là cố định. Hướng đi được coi là hướng của điểm cuối của đường đa tuyến.

Bạn có thể sửa đổi nét vẽ hoặc màu tô của các ký hiệu được xác định trước bằng cách sử dụng bất kỳ tuỳ chọn ký hiệu mặc định nào.

Bao gồm các ký hiệu được xác định trước sau đây:

Tên Mô tả Ví dụ:
google.maps.SymbolPath.CIRCLE Một vòng tròn.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Một mũi tên chỉ về phía sau, được đóng ở tất cả các cạnh.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Một mũi tên chỉ về phía trước, đóng ở mọi phía.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Mũi tên chỉ về phía sau, mở ở một bên.
google.maps.SymbolPath.FORWARD_OPEN_ARROW Một mũi tên chỉ về phía trước, mở ở một bên.

Thêm biểu tượng vào điểm đánh dấu

Để hiển thị biểu tượng dựa trên vectơ trên một điểm đánh dấu, hãy truyền một giá trị cố định đối tượng Symbol có đường dẫn mong muốn đến thuộc tính icon của điểm đánh dấu. Ví dụ sau đây sử dụng ký hiệu đường dẫn SVG để tạo biểu tượng tuỳ chỉnh cho điểm đánh dấu.

TypeScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.

function initMap(): void {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 9,
      center: center,
    }
  );

  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.
function initMap() {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 9,
    center: center,
  });
  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

window.initMap = initMap;
index.js
Xem ví dụ

Thử mẫu

Thêm ký hiệu vào đường đa tuyến

Để hiển thị các ký hiệu trên một đa tuyến, hãy đặt thuộc tính icons[] của đối tượng PolylineOptions. Mảng icons[] nhận một hoặc nhiều giá trị cố định đối tượng IconSequence, với các thuộc tính sau:

  • icon (bắt buộc) là ký hiệu để hiển thị trên dòng.
  • offset xác định khoảng cách từ đầu dòng tại vị trí sẽ hiển thị biểu tượng. Khoảng cách này có thể được biểu thị dưới dạng tỷ lệ phần trăm chiều dài của đường (ví dụ: "50%") hoặc tính bằng pixel (ví dụ: "50px"). Giá trị mặc định là "100%".
  • repeat xác định khoảng cách giữa các biểu tượng liên tiếp trên dòng. Khoảng cách này có thể được biểu thị dưới dạng tỷ lệ phần trăm chiều dài của đường (ví dụ: "50%") hoặc tính bằng pixel (ví dụ: "50px"). Để tắt tính năng lặp lại biểu tượng, hãy chỉ định "0". Giá trị mặc định là "0".

Với sự kết hợp của các ký hiệu và lớp PolylineOptions, bạn có nhiều quyền kiểm soát đối với giao diện của các đường đa giác trên bản đồ. Dưới đây là một số ví dụ về cách tuỳ chỉnh mà bạn có thể áp dụng.

Mũi tên

Sử dụng thuộc tính IconSequence.offset để thêm mũi tên vào đầu hoặc cuối đường đa tuyến.

// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

// Create the polyline and add the symbol via the 'icons' property.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  icons: [{
    icon: lineSymbol,
    offset: '100%'
  }],
  map: map
});

Xem ví dụ

Đường kẻ đứt nét

Bạn có thể tạo hiệu ứng đường kẻ nét đứt bằng cách đặt độ mờ của đường đa nét thành 0 và phủ một biểu tượng mờ lên đường kẻ theo các khoảng thời gian đều đặn.

// Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
  path: 'M 0,-1 0,1',
  strokeOpacity: 1,
  scale: 4
};

// Create the polyline, passing the symbol in the 'icons' property.
// Give the line an opacity of 0.
// Repeat the symbol at intervals of 20 pixels to create the dashed effect.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  strokeOpacity: 0,
  icons: [{
    icon: lineSymbol,
    offset: '0',
    repeat: '20px'
  }],
  map: map
});

Xem ví dụ

Đường dẫn tùy chỉnh

Biểu tượng tuỳ chỉnh cho phép bạn thêm nhiều hình dạng khác nhau vào một đa tuyến.

// Define the custom symbols. All symbols are defined via SVG path notation.
// They have varying stroke color, fill color, stroke weight,
// opacity and rotation properties.
  var symbolOne = {
    path: 'M -2,0 0,-2 2,0 0,2 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1
  };

  var symbolTwo = {
    path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',
    strokeColor: '#00F',
    rotation: 45
  };

  var symbolThree = {
    path: 'M -2,-2 2,2 M 2,-2 -2,2',
    strokeColor: '#292',
    strokeWeight: 4
  };

  // Create the polyline and add the symbols via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [
      {
        icon: symbolOne,
        offset: '0%'
      }, {
        icon: symbolTwo,
        offset: '50%'
      }, {
        icon: symbolThree,
        offset: '100%'
      }
    ],
    map: map
  });

Xem ví dụ

Tạo ảnh động cho một biểu tượng

Bạn có thể tạo ảnh động cho một biểu tượng dọc theo một đường dẫn bằng cách sử dụng hàm window.setInterval() của DOM để thay đổi độ dời của biểu tượng theo các khoảng thời gian cố định.

TypeScript

// This example adds an animated symbol to a polyline.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 20.291, lng: 153.027 },
      zoom: 6,
      mapTypeId: "terrain",
    }
  );

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  const line = new google.maps.Polyline({
    path: [
      { lat: 22.291, lng: 153.027 },
      { lat: 18.291, lng: 153.027 },
    ],
    icons: [
      {
        icon: lineSymbol,
        offset: "100%",
      },
    ],
    map: map,
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line: google.maps.Polyline) {
  let count = 0;

  window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

    icons[0].offset = count / 2 + "%";
    line.set("icons", icons);
  }, 20);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example adds an animated symbol to a polyline.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.291, lng: 153.027 },
    zoom: 6,
    mapTypeId: "terrain",
  });
  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };
  // Create the polyline and add the symbol to it via the 'icons' property.
  const line = new google.maps.Polyline({
    path: [
      { lat: 22.291, lng: 153.027 },
      { lat: 18.291, lng: 153.027 },
    ],
    icons: [
      {
        icon: lineSymbol,
        offset: "100%",
      },
    ],
    map: map,
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
  let count = 0;

  window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

    icons[0].offset = count / 2 + "%";
    line.set("icons", icons);
  }, 20);
}

window.initMap = initMap;
index.js
Xem ví dụ

Thử mẫu