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 một hình nhiều đường
  6. Tạo ảnh động cho 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 một đố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 trực quan, chẳng hạn như màu sắc và độ đậm của nét vẽ và vùng tô. Xem danh sách thuộc tính.

Một số biểu tượng đượ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

Xin lưu ý rằng hành vi mặc định của Symbol có sự khác biệt nhỏ tuỳ thuộc vào việc nó xuất hiện trên một điểm đánh dấu hay một đường nhiều đoạn. Những điểm khác biệt này được mô tả trong danh sách các 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 ý: Các đường dẫn vectơ trên một đường nhiều đường phải nằm trong hình vuông 22x22px. Nếu đường dẫn của bạn có 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 số, chẳng hạn như 0,2, để các điểm được chia tỷ lệ kết quả nằm 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 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ẽ được cố định 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 nền biểu tượng (tức là vùng được viền bằng nét vẽ). Tất cả màu CSS3 đều được hỗ trợ, ngoại trừ các màu có tên mở rộng. Đối với các biểu tượng trên điểm đánh dấu, màu mặc định là "đen". Đối với các biểu tượng trên đường nhiều đoạn, màu mặc định là màu nét vẽ của đường nhiều đoạn tương ứng.
  • fillOpacity xác định độ mờ tương đối (tức là không trong suốt) của phần tô 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 chiều kim đồng hồ bằng độ. Theo mặc định, điểm đánh dấu biểu tượng có độ xoay là 0 và biểu tượng trên đường nhiều đoạ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 biểu tượng trên đường nhiều đoạn sẽ cố định độ xoay của biểu tượng đó để biểu tượng không còn đi theo đường cong của đường kẻ nữa.
  • scale đặt số tiền mà biểu tượng được điều chỉnh kích thước. Đối với điểm đánh dấu biểu tượng, tỷ lệ mặc định là 1. Sau khi được thu phóng, 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 một đường nhiều đoạn, tỷ lệ mặc định là độ đậm nét của đường nhiều đoạn. Sau khi được điều chỉnh tỷ lệ, biểu tượng phải nằm trong hình vuông 22x22px, được đặt ở giữa tâm 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ừ các màu có tên mở rộng. Đối với các biểu tượng trên điểm đánh dấu, màu mặc định là "đen". Đối với các biểu tượng trên một đường nhiều đoạn, màu mặc định là màu nét của đường nhiều đoạn.
  • strokeOpacity xác định độ mờ tương đối (tức là không có độ 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 đ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 nhiều đoạn, giá trị mặc định là độ mờ của nét vẽ của đường nhiều đoạn.
  • strokeWeight xác định độ dày của đường viền 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

Maps JavaScript API 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 đường nhiều đoạn thông qua lớp SymbolPath.

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

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

Sau đây là các biểu tượng được xác định trước:

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 hướng về phía sau và khép kín ở mọi phía.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Một mũi tên chỉ về phía trước và khép kín ở mọi phía.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Một mũi tên chỉ về phía sau và mở ở một bên.
google.maps.SymbolPath.FORWARD_OPEN_ARROW Một mũi tên chỉ về phía trước và mở ở một bên.

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

Để hiển thị một biểu tượng dựa trên vectơ trên AdvancedMarkerElement, hãy dùng phần tử XML SVG. Ví dụ sau đây cho thấy cách nối một phần tử XML SVG vào một AdvancedMarkerElement.

TypeScript

const parser = new DOMParser();

// A marker with a custom inline SVG.
const pinSvgString =
    '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';

const pinSvg = parser.parseFromString(
    pinSvgString,
    'image/svg+xml'
).documentElement;
const pinSvgMarker = new AdvancedMarkerElement({
    position: { lat: 37.42475, lng: -122.094 },
    title: 'A marker using a custom SVG image.',
    anchorLeft: '-50%',
    anchorTop: '-50%',
});
pinSvgMarker.append(pinSvg);
mapElement.append(pinSvgMarker);

JavaScript

const parser = new DOMParser();

// A marker with a custom inline SVG.
const pinSvgString =
    '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';

const pinSvg = parser.parseFromString(
    pinSvgString,
    'image/svg+xml'
).documentElement;
const pinSvgMarker = new AdvancedMarkerElement({
    position: { lat: 37.42475, lng: -122.094 },
    title: 'A marker using a custom SVG image.',
    anchorLeft: '-50%',
    anchorTop: '-50%',
});
pinSvgMarker.append(pinSvg);
mapElement.append(pinSvgMarker);

Thêm biểu tượng vào một đường nhiều đoạn

Để hiển thị các biểu tượng trên một đường nhiều đoạ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 chữ IconSequence đối tượng, 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 đường.
  • offset xác định khoảng cách từ đầu dòng mà tại đó biểu tượng sẽ được kết xuất. Khoảng cách này có thể được biểu thị bằng tỷ lệ phần trăm chiều dài của đường kẻ (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 đường thẳng. Khoảng cách này có thể được biểu thị bằng tỷ lệ 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 chế độ lặp lại biểu tượng, hãy chỉ định "0". Giá trị mặc định là "0".

Khi kết hợp các biểu tượng và lớp PolylineOptions, bạn có thể kiểm soát giao diện của đường nhiều đoạn trên bản đồ. Dưới đây là một số ví dụ về các điểm 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 nhiều đoạ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 nét đứt

Bạn có thể tạo hiệu ứng đường nét đứt bằng cách đặt độ mờ của hình nhiều đường thành 0 và phủ một biểu tượng mờ lên đường 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

Ký hiệu tuỳ chỉnh cho phép bạn thêm nhiều hình dạng khác nhau vào một đường nhiều đoạ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 biểu tượng

Bạn có thể tạo hiệu ứ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 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;

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ụ