Google Map 符号 - 润新知

简介

如果您想在标记上使用基于矢量的图标，或者向多段线添加图像，便可使用符号。

标记支持使用光栅图像以及矢量图像。请参阅有关定制标记图标的文档。

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