您已全部設定完成!

若要開始開發,請參閱我們的開發人員文件

啟用 Google Maps JavaScript API

為協助您開始,我們將先引導您使用「Google 開發人員控制台」來執行一些動作:

  1. 建立或選擇專案
  2. 啟用 Google Maps JavaScript API 與相關服務
  3. 建立適當的金鑰
繼續

符號

  1. 簡介
  2. 符號的屬性
  3. 預先定義的符號
  4. 新增符號到標記
  5. 新增符號到折線
  6. 建立動畫符號

簡介

當您想要在標記上使用向量型圖示,或是新增影像到折線時,符號便會很有用。

Symbol 是可以在 MarkerPolyline 物件上顯示的向量型影像。符號的形狀是由使用 SVG 路徑標記法的路徑來定義。雖然 path 是唯一的必要屬性,但是 Symbol 物件也支援可讓您自訂視覺層面的多種屬性,例如筆觸和填滿的色彩和粗細。請參閱下面的屬性清單。

SymbolPath 類別提供數個預先定義的符號。請參閱下面的清單。

符號的屬性

請注意,Symbol 的預設行為會依據它是顯示在標記或折線上而有些微的差異。下列屬性清單會說明這些差異。

Symbol 支援下列屬性:

  • path必要)為定義符號形狀的路徑。您可以使用 google.maps.SymbolPath 中其中一個預先定義的路徑,或使用 SVG 路徑標記法定義自訂路徑。注意:折線上的向量路徑必須能夠包含在 22x22px 的正方形內。如果您的路徑包含位於方形外部的點,則必須將符號的 scale 屬性調整為分數值(如 0.2),以使調整過的點可以被包含在正方形內。
  • anchor 可設定符號相對於標記或折線的位置。符號路徑的向左和向上座標分別轉譯自錨定點的 x 和 y 座標。根據預設,符號錨定於 (0, 0)。位置表示法使用與符號路徑相同的座標系統。
  • fillColor 是符號填滿(也就是由筆觸所包圍的區域)的色彩。支援所有 CSS3 色彩,延伸的具名色彩除外。對於標記上的符號,預設是「黑色」。對於折線上的符號,預設是對應折線的筆觸色彩。
  • fillOpacity 可定義符號填滿的相對不透明度(換句話說,就是透明度缺乏的程度)。值的範圍從 0.0(完全透明)到 1.0(完全不透明)。預設值為 0.0。
  • rotation 是旋轉符號的角度,以順時針角度表示。根據預設,符號標記的旋轉為 0,而折線上的符號會依照它所在的邊緣角度旋轉。設定折線上符號的旋轉可修正符號的旋轉,讓它不會再跟隨線條的曲度。
  • scale 可設定符號比例大小的量。對於符號標記,預設比例是 1。調整比例之後,符號可以是任何大小。對於折線上的符號,預設比例是折線的筆觸粗細。調整比例之後,符號必須能被包含在 22x22px 的正方形內,中心點則為符號的錨定點。
  • strokeColor 是符號輪廓的色彩。支援所有 CSS3 色彩,延伸的具名色彩除外。對於標記上的符號,預設是「黑色」。對於折線上的符號,預設色彩是折線的筆觸色彩。
  • strokeOpacity 可決定相對於符號筆觸的不透明度(換句話說,就是透明度缺乏的程度)。值的範圍從 0.0(完全透明)到 1.0(完全不透明)。對於符號標記,預設值是 1.0。對於折線上的符號,預設是折線的筆觸不透明度。
  • strokeWeight 可定義符號輪廓的粗細。預設是符號的 scale

預先定義的符號

Google 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 屬性。

下面的範例會使用其中一個預先定義的向量路徑來建立一個圖示。

// This example uses a symbol to add a vector-based icon to a marker.
// The symbol uses one of the predefined vector paths ('CIRCLE') supplied by the
// Google Maps JavaScript API.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363882, lng: 131.044922}
  });

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    draggable: true,
    map: map
  });

}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example uses a symbol to add a vector-based icon to a marker.
// The symbol uses one of the predefined vector paths ('CIRCLE') supplied by the
// Google Maps JavaScript API.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363882, lng: 131.044922}
  });

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    draggable: true,
    map: map
  });

}

檢視範例 (marker-symbol-predefined)

下列範例使用 SVG 路徑標記法來建立標記的自訂圖示。

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

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363882, lng: 131.044922}
  });

  var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: 'gold',
    strokeWeight: 14
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: goldStar,
    map: map
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a star-shaped symbol
// with a pale yellow fill and a thick yellow border.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -25.363882, lng: 131.044922}
  });

  var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: 'gold',
    strokeWeight: 14
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: goldStar,
    map: map
  });
}

檢視範例 (marker-symbol-custom)

新增符號到折線

如果要在折線上顯示符號,請設定 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
});

檢視範例 (overlay-symbol-arrow)

虛線

將折線的不透明度設成 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
});

檢視範例 (overlay-symbol-dashed)

自訂路徑

自訂符號可讓您將許多不同的形狀新增到折線。

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

檢視範例 (overlay-symbol-custom)

建立動畫符號

使用 DOM 的 window.setInterval() 函式,以固定的間隔來變更符號的位移,即可讓沿著路徑的符號產生動畫效果。

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

function initMap() {
  var 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.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  // Create the polyline and add the symbol to it 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
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
  }, 20);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example adds an animated symbol to a polyline.

function initMap() {
  var 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.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  // Create the polyline and add the symbol to it 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
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

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

檢視範例 (overlay-symbol-animate)

傳送您對下列選項的寶貴意見...

這個網頁
Google Maps JavaScript API
Google Maps JavaScript API
需要協助嗎?請前往我們的支援網頁