Google地圖官方API-在地圖上繪圖（自定義符号）

符号

介紹

當您想在标記上使用基于矢量的圖示或将圖像添加到折線時，符号非常有用 。

标記支援栅格圖像和矢量圖像的使用。請參閱有關自定義标記圖示的文檔 。

A 是可以顯示在或對象上的基于矢量的圖像 。符号的形狀由使用SVG路徑符号的路徑定義 。雖然是唯一必需的屬性，但該 對象支援多種屬性，使您可以自定義視覺外觀，例如筆觸和填充的顔色和粗細。請參閱下面的屬性清單。 SymbolMarkerPolylinepathSymbol

通過SymbolPath 該類可以使用幾個預定義的符号。請參閱下面的清單。

符号的屬性

請注意，a的預設行為Symbol取決于它出現在标記還是折線上而略有不同。這些差異在下面的屬性清單中描述。

A Symbol支援以下屬性：

path（必填）是定義符号形狀的路徑。您可以在其中使用預定義的路徑之一，也可以使用 SVG路徑符号定義自定義路徑 。注意：折線上的矢量路徑必須适合22x22px的正方形。如果路徑中包括該正方形以外的點，則必須将符号的屬性調整為分數值（例如0.2），以使生成的縮放點适合正方形。 google.maps.SymbolPathscale

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符号的。

預定義符号

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           

}

檢視示例。

以下示例使用 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.

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           

};

position: map.getCenter(),
icon: goldStar,
map: map           

向折線添加符号

要在折線上顯示符号，請設定對象的icons[]屬性PolylineOptions。該icons[]數組采用一個或多個對象文字，具有以下屬性： IconSequence

icon（required）是要線上上渲染的符号。

offset确定距要渲染圖示的行的起點的距離。該距離可以表示為線條長度的百分比（例如，“ 50％”），也可以表示為像素（例如，“ 50px”）。預設值為“ 100％”。

repeat确定行中連續圖示之間的距離。該距離可以表示為線條長度的百分比（例如，“ 50％”），也可以表示為像素（例如，“ 50px”）。要禁用重複圖示，請指定“ 0”。預設值為“ 0”。

注意：如果折線是測地線（也就是說，如果其geodesic屬性設定為true）offset，repeat 則預設指定為米和米的距離。将像素值offset或 設定為repeat像素值将導緻在螢幕上以像素為機關計算距離。

結合使用符号和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.

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.

strokeOpacity: 0,

icon: lineSymbol,
offset: '0',
repeat: '20px'           

自定義路徑

自定義符号允許您向折線添加許多不同的形狀。

// 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()功能以固定間隔更改符号的偏移量來沿路徑設定符号動畫 。

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

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.

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