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

  1. Giới thiệu
  2. Tính chất của biểu tượng
  3. Ký hiệu được xác định trước
  4. Thêm một 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 ảnh động cho một biểu tượng

Giới thiệu

Symbol là biểu tượng dựa trên vectơ có thể được hiển thị trên 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à điền. Xem danh sách tài sản.

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

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

Lưu ý hành vi mặc định của Symbol có thay đổi đôi chút tuỳ thuộc vào việc vị trí đó xuất hiện trên điểm đánh dấu hay 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 đườ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 vừa với hình vuông có kích thước 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, sao cho các điểm được điều chỉnh theo tỷ lệ thu được sẽ vừa với 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 đi của 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 là neo tại (0, 0). Vị trí được thể hiện theo cùng một hệ toạ độ làm đường dẫn của biểu tượng.
  • fillColor là màu nền của biểu tượng (màu là vùng có nét gạch). Tất cả màu CSS3 đều được hỗ trợ, ngoại trừ các màu được đặt tên mở rộng. Đố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 biểu tượng trên hình nhiều đường, 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 màu nền của biểu tượng. Các giá trị nằm trong khoảng từ 0 (hoàn toàn) trong suốt) đế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ồ theo độ. Theo mặc định, điểm đánh dấu biểu tượng có vòng xoay là 0 và biểu tượng trên hình nhiều đường bị xoay theo góc của cạnh mà nó tạo thành nói dối. Đặt xoay biểu tượng trên hình nhiều đường sẽ sửa thao tác xoay của ký hiệu sao cho không còn đi theo đường cong của đường đó nữa.
  • scale đặt mức 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 chia tỷ lệ, ký hiệu có thể là mọi kích thước. Đối với các ký hiệu 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 chia tỷ lệ, biểu tượng phải nằm bên trong hình vuông 22x22px, chính giữa vào điểm neo của biểu tượng.
  • strokeColor là màu đường viền của biểu tượng. Tất cả CSS3 các màu được hỗ trợ, ngoại trừ các màu được đặt tên mở rộng. Đối với ký hiệu 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 (tức là thiếu độ trong suốt) của nét vẽ trong biểu tượng. Các giá trị nằm trong khoảng từ 0 (hoàn toàn) trong suốt) đế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 hình nhiều đường, mặc định là độ mờ nét vẽ của hình nhiều đường.
  • strokeWeight xác định độ đậm của đường viền biểu tượng. Chiến lược phát hành đĩa đơn 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 được tích hợp sẵn mà bạn có thể thêm vào điểm đánh dấu hoặc hình nhiều đường qua Lớp SymbolPath.

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

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

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 Hình tròn.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Mũi tên chỉ về phía sau đóng ở mọi phía.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Mũi tên chỉ về phía trước được đóng ở tất cả các phía.
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 mở ở một bên.

Thêm một 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 điểm đánh dấu, truyền một Đối tượng Symbol có đường dẫn mong muốn đến điểm đánh dấu thuộc tính icon. Ví dụ sau đây sử 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;
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ử dùng mẫu

Thêm biểu tượng vào hình nhiều đường

Để hiển thị biểu tượng trên hình nhiều đường, hãy đặt thuộc tính icons[] của đối tượng PolylineOptions. Mảng icons[] sẽ nhận một hoặc nhiều Đối tượng IconSequence bằng chữ, với các giá trị sau thuộc tính:

  • icon (bắt buộc) là biểu tượng kết xuất đường kẻ.
  • offset xác định khoảng cách từ đầu đường kẻ tại đó một biểu tượng sẽ được hiển thị. Khoảng cách này có thể được biểu thị dưới dạng phần trăm độ dài của dòng (ví dụ: "50%") hoặc tính bằng pixel (ví dụ: 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 kẻ. 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 tính bằng pixel (ví dụ: "50 px"). Để tắt tính năng lặp lại của 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ó nhiều quyền kiểm soát giao diện của hình nhiều đường trên bản đồ của mình. 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 điểm bắt đầu hoặc kết thúc của 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ể có được hiệu ứng đường nét đứt bằng cách đặt độ mờ của hình nhiều đường bằng 0 và phủ một biểu tượng mờ lên đường kẻ ngắt quãng.

// 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 các biểu tượng dọc theo đường dẫn bằng cách sử dụng giao diện DOM Hàm window.setInterval() dùng để thay đổi độ lệch của biểu tượng theo 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ụ

Dùng thử mẫu