符號 (以向量為基礎的圖示)

透過集合功能整理內容 你可以依據偏好儲存及分類內容。
  1. 說明
  2. 符號的屬性
  3. 預先定義的符號
  4. 在標記中加入符號
  5. 在折線中加入符號
  6. 為符號加上動畫效果

引言

Symbol 是一個向量圖示,可以顯示在 MarkerPolyline 物件上。符號的形狀是透過使用 SVG 路徑標記法的路徑定義。雖然 path 是唯一的必要屬性,但 Symbol 物件支援多種屬性,可讓您自訂視覺元素,例如筆劃和填滿的色彩和粗細。請參閱屬性清單。

您可以透過 SymbolPath 類別使用多種預先定義的符號。詳情請見下方清單。

符號的屬性

請注意,Symbol 的預設行為會因其是標記或折線而略有不同。這些屬性列於下方屬性清單中。

Symbol 支援下列屬性:

  • path (必要) 是定義符號形狀的路徑。您可以使用 google.maps.SymbolPath 中的其中一個預先定義路徑,或使用 SVG 路徑標記法定義自訂路徑。注意:折線上的向量路徑必須在 22x22px 的正方形內。如果路徑包含這個正方形外的點,則必須將符號的 scale 屬性調整為分數值 (例如 0.2),讓產生的縮放點符合正方形。
  • anchor 可設定符號相對於標記或折線的位置。符號路徑的 # 座標和 Y 軸座標會分別由左和右平移。根據預設,符號會以 (0, 0) 錨定。這個位置會以與符號路徑相同的座標系統表示。
  • fillColor 是符號填滿區域 (也就是筆劃邊界的區域)。支援所有 CSS3 顏色,但擴充已命名顏色除外。 標記上的符號外框預設為「黑色」;如果是折線上的符號,預設值為對應折線的筆劃顏色。
  • fillOpacity 可定義符號填充資料的相對不透明度 (即沒有透明度)。這個值必須介於 0.0 (完全透明) 到 1.0 (完全不透明) 之間。預設值為 0.0。
  • rotation 是符號的旋轉角度,以順時針角度表示。根據預設,符號標記的旋轉角度為 0,折線上的符號則會以其所在邊緣的角度旋轉。在折線上設定符號的旋轉方式會修正符號的旋轉方式,使其不再遵循線條的曲線。
  • scale 可設定符號的大小。 標記上符號的預設縮放比例為 1;縮放符號後,大小不限。如果是折線上的符號,預設縮放比例會是折線的筆劃粗細。縮放後,符號必須位於 22x22 像素的正方形內,並以符號和錨點為中心。
  • strokeColor 是符號外框的顏色。支援所有 CSS3 顏色,但擴充已命名顏色除外。針對標記上的符號,預設值為 'black'。如果是折線上的符號,預設顏色是折線的筆劃顏色。
  • strokeOpacity 會決定符號筆劃的相對不透明度 (也就是沒有透明度)。這個值必須介於 0.0 (完全透明) 到 1.0 (完全不透明) 之間。針對符號標記,預設值為 1.0。如果是折線上的符號,則預設值為折線的筆劃透明度。
  • strokeWeight 會定義符號外框的權重。預設值為符號的 scale

預先定義的符號

Maps JavaScript API 提供了一些內建符號,讓您可透過 SymbolPath 類別新增至標記或折線。

預設符號包含一個圓形與兩種箭頭 包括向前和向後箭頭。這對於折線而言特別實用,因為折線是符號的方向固定。前進方向為折線的終點方向。

您可以使用任何預設符號選項,修改預先定義符號的筆劃或填滿。

以下是系統提供的預先定義符號:

名稱 說明 範例
google.maps.SymbolPath.CIRCLE 圓形。
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW 四邊相連且指向後方的箭頭。
google.maps.SymbolPath.FORWARD_CLOSED_ARROW 四邊相連且指向前方的箭頭。
google.maps.SymbolPath.BACKWARD_OPEN_ARROW 一端開放且指向後方的箭頭。
google.maps.SymbolPath.FORWARD_OPEN_ARROW 一端開放且指向前方的箭頭。

新增符號到標記

如要在標記上顯示向量圖示,請將 Symbol 物件常值與所需路徑傳遞至標記的 icon 屬性。以下範例使用 SVG 路徑標記法為標記建立自訂圖示。

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: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.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(15, 30),
  };

  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: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.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(15, 30),
  };

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

window.initMap = initMap;
查看範例

查看範例

新增符號到折線

如要在折線上顯示符號,請設定 PolylineOptions 物件的 icons[] 屬性。icons[] 陣列具備一或多個 IconSequence 物件常值,其屬性如下:

  • icon (必須) 是線上顯示的符號。
  • offset 會決定算繪圖示的那行起點的距離。這個距離可以用線條長度的百分比表示 (例如 '50%') 或以像素為單位 (例如 '50px')。預設值為「100%」。
  • repeat 可決定線條上連續圖示之間的距離。這個距離可以用線條長度的百分比表示 (例如 '50%') 或以像素為單位 (例如 '50px')。如要停用圖示的重複功能,請指定 '0'。預設值為「0」。

結合符號和 PolylineOptions 類別,您可以充分掌控地圖上折線的外觀和風格。以下提供您可以套用的幾個自訂範例。

箭頭

使用 IconSequence.offset 屬性在折線的開頭或結尾加入箭頭。

// 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
});

查看範例

虛線

只要將折線的不透明度設為 0,並定期將不透明符號重疊在線條上,就能達到虛線。

// 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
});

查看範例

自訂路徑

自訂符號可讓您將各種形狀新增至折線。

// 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
  });

查看範例

將符號製作成動畫

您可以使用 DOM' 的 window.setInterval() 函式,以固定間隔變更符號的偏移值,以便在路徑沿著符號進行動畫。

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;
查看範例

查看範例