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 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 hình nhiều đường
  6. Tạo hiệu ứng độ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 Marker hoặc đối tượng Polyline. Hình dạng của biểu tượng được xác định bằng một đường dẫn bằ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 cơ sở lưu trú.

Một số ký hiệu được xác định trước có sẵn thông qua lớp SymbolPath. Xem danh sách bên dưới.

Thuộc tính của biểu tượng

Lưu ý rằng hành vi mặc định của Symbol thay đổi một chút tuỳ thuộc vào việc hành vi đó xuất hiện trên một điểm đánh dấu hay một hình nhiều đường. Các phương sai này được mô tả trong danh sách các thuộc tính dưới đây.

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 hình nhiều đường phải nằm trong hình vuông 22x22px. Nếu đường dẫn của bạn bao gồm các điểm bên 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 số, chẳng hạn như 0,2 để các điểm thu được có tỷ lệ nằm vừa trong hình vuông.
  • anchor đặt vị trí của biểu tượng so với điểm đánh dấu hoặc hình nhiều đường. Toạ độ của đường dẫn của biểu tượng được dịch sang trái và lên trên theo toạ độ x và y của điểm neo tương ứng. Theo mặc định, một biểu tượng sẽ neo tại (0, 0). Vị trí được biểu thị trong cùng một hệ toạ độ như đường dẫn của biểu tượng.
  • fillColor là màu tô của biểu tượng (nghĩa là vùng được viền bởi nét vẽ). Tất cả màu CSS3 đều được hỗ trợ, ngoại trừ các màu mở rộng được đặt tên. Đối với các biểu tượng trên điểm đánh dấu, giá trị mặc định là "đen". Đối với các biểu tượng trên hình nhiều đường, giá trị mặc định sẽ là màu nét vẽ 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 màu nền biểu tượng. Các giá trị nằm trong khoảng từ 0.0 (trong suốt hoàn toàn) đến 1.0 (mờ hoàn toàn). Giá trị mặc định là 0.0.
  • rotation là góc để xoay biểu tượng, được biểu thị theo độ theo chiều kim đồng hồ. Theo mặc định, điểm đánh dấu biểu tượng có độ xoay là 0 và một biểu tượng trên hình nhiều đường được xoay theo góc của cạnh chứa biểu tượng đó. Việc đặt chế độ xoay biểu tượng trên một hình nhiều đường sẽ sửa chế độ xoay của biểu tượng sao cho biểu tượng không còn tuân theo đường cong của đường đó.
  • scale đặt mức độ thay đổi 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ệ, biểu tượng có thể có kích thước bất kỳ. Đối với các biểu tượng trên hình nhiều đường, tỷ lệ mặc định là độ đậm nét của hình nhiều đường. Sau khi được điều chỉnh theo tỷ lệ, biểu tượng phải nằm trong một hình vuông 22x22px, ở chính giữa điểm neo của biểu tượng.
  • strokeColor là màu cho đường viền của biểu tượng. Tất cả các màu CSS3 đều được hỗ trợ, ngoại trừ các màu mở rộng được đặt tên. Đối với các biểu tượng trên điểm đánh dấu, giá trị mặc định là "đen". Đối với các biểu tượng trên hình nhiều đường, màu mặc định là màu nét của hình nhiều đường.
  • strokeOpacity xác định độ mờ tương đối (nghĩa là thiếu trong suốt) của nét vẽ biểu tượng. Các giá trị nằm trong khoảng từ 0.0 (trong suốt hoàn toàn) đến 1.0 (mờ hoàn toàn). Đối vớ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 hình nhiều đường, giá trị mặc định là độ mờ nét vẽ của hình nhiều đường.
  • strokeWeight xác định độ đậm cho đườ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 định sẵn

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 các điểm đánh dấu hoặc hình nhiều đường thông qua lớp SymbolPath.

Các biểu tượng mặc định bao gồm vòng tròn và hai loại mũi tên. Cả mũi tên tiến và lùi đều có sẵn. Điều này đặc biệt hữu ích đối với hình nhiều đường vì hướng của biểu tượng trên hình nhiều đường là cố định. Chuyển tiếp được coi là hướng theo hướng cuối của hình nhiều đường.

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

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

Tên Nội dung mô tả Ví dụ:
google.maps.SymbolPath.CIRCLE Một vòng kết nối.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Một mũi tên chỉ về phía sau đóng ở mọi bên.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Mũi tên chỉ về phía trước đóng ở mọi bên.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Mũi tên chỉ về phía sau đang mở ở một bên.
google.maps.SymbolPath.FORWARD_OPEN_ARROW Mũi tên chỉ về phía trước đang 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 chuyể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 dùng ký hiệu đường dẫn SVG để tạo biểu tượng tuỳ chỉnh cho một đ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;

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;
Xem ví dụ

Thử mẫu

Thêm ký hiệu vào hình nhiều đường

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

  • icon (bắt buộc) là biểu tượng cần hiển thị trên dòng.
  • offset xác định khoảng cách từ đầu đường thẳng mà biểu tượng sẽ hiển thị. Khoảng cách này có thể được biểu thị dưới dạng phần trăm chiều dài của đường (ví dụ: "50%") hoặc 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 phần trăm chiều dài của đường kẻ (ví dụ: "50%") hoặc 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 giữa các ký hiệu và lớp PolylineOptions, bạn có rất nhiều quyền kiểm soát đối với giao diện của hình nhiều đường trên bản đồ. Dưới đây là một số ví dụ về các 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 hình nhiều đường.

// 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 nét đứt

Bạn có thể đạt được hiệu ứng đường nét đứt bằng cách đặt độ mờ của hình nhiều đường thành 0 và định kỳ phủ một biểu tượng mờ lên trên đường kẻ đó.

// 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 vào một hình nhiều đường.

// 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 độ lệch của biểu tượng tại 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;

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;
Xem ví dụ

Thử mẫu