Google Map 符號

weixin_34198583發表於2016-05-13
Go符號

 

 

符號

簡介

如果您想在標記上使用基於向量的圖示，或者向多段線新增影像，便可使用符號。

標記支援使用光柵影像以及向量影像。請參閱有關定製標記圖示的文件。

Symbol 是一種可顯示在 Marker 或 Polyline 物件上的基於向量的影像。符號的形狀由採用 SVG 路徑標記法的路徑定義。儘管 path 是唯一的必填屬性，但 Symbol 物件還支援各類其他屬性，您可以利用這些屬性進行視覺方面（如描邊和填充區顏色和粗細）的定製。請參閱下文的屬性列表。

有幾個預定義符號通過 SymbolPath 類提供。請參閱下文的列表。

符號的屬性

請注意，Symbol 的預設行為視其出現在標記上還是多段線上而略有差異。下文的屬性列表對這些差異做了說明。

Symbol 支援下列屬性：

  • path（必填項）是定義符號形狀的路徑。您可以使用 google.maps.SymbolPath 中的某個預定義路徑，或者利用 SVG 路徑標記法定義一個自定義路徑。注：多段線上的向量路徑必須能夠容納在一個 22x22px 方塊內。如果您的路徑包括位於該方塊外的點，則必須將符號的 scale 屬性調整為某個小數值（如 0.2），以使生成的縮放點可容納在該方塊內。
  • anchor 設定符號與標記或多段線的相對位置。符號路徑的座標按錨點的 x 座標和 y 座標分別向左和向上平移。預設情況下，符號錨定在 (0, 0) 處。表示該位置與表示符號路徑的座標系相同。
  • fillColor 是符號填充區（即描邊劃定區域）的顏色。支援所有 CSS3 顏色，擴充套件的已命名顏色除外。對於標記上的符號，預設值為“black”。對於多段線上的符號，預設值為相應多段線的描邊顏色。
  • fillOpacity 定義符號填充區的相對不透明度（即缺乏透明度）。取值範圍是 0.0（全透明）至 1.0（全不透明）。預設值為 0.0。
  • rotation 是符號的旋轉角度，以順時針度數表示。預設情況下，符號標記旋轉角度為 0，多段線上的符號旋轉角度為其所在邊緣的角度。設定多段線上符號的旋轉角度將在一定程度上固定符號的旋轉角度，使得符號不再依循線的曲度。
  • scale 設定符號的尺寸縮放大小。對於符號標記，預設縮放比例為 1。縮放後的符號可能為任意尺寸。對於多段線上的符號，預設縮放比例為多段線的描邊粗細。縮放後的符號必須位於一個 22x22px 方塊內，該方塊以符號的錨點為中心。
  • strokeColor 是符號輪廓的顏色。支援所有 CSS3 顏色，擴充套件的已命名顏色除外。對於標記上的符號，預設值為“black”。對於多段線上的符號，預設顏色為多段線的描邊顏色。
  • 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
  });

}

檢視示例 (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
  });
}

檢視示例 (marker-symbol-custom)。

向多段線新增符號

如需在多段線上顯示符號，請設定 PolylineOptions 物件的 icons[] 屬性。icons[] 陣列接受具有下列屬性的一個或多個 IconSequence 物件字面量：

  • icon（必填項）是要線上上渲染的符號。
  • 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
  });

檢視示例 (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: google.maps.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)。

相關文章