符号(基于矢量的图标)

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。
  1. 简介
  2. 符号的属性
  3. 预定义符号
  4. 向标记添加符号
  5. 向多段线添加符号
  6. 为符号添加动画效果

简介

Symbol 是一种矢量图标,可在 MarkerPolyline 对象上显示。符号的形状由采用 SVG 路径表示法的路径定义。 虽然 path 是唯一的必需属性,但 Symbol 对象支持各种属性,可让您自定义视觉方面,例如描边颜色和粗细的颜色和粗细。请参阅属性列表。

您可以通过 SymbolPath 类使用多种预定义符号。请参阅下文的列表。

符号的属性

请注意,Symbol 的默认行为会因其是出现在标记上还是多段线上而略有差异。下面的属性列表中介绍了这些差异。

Symbol 支持以下属性:

  • path(必需)是定义符号形状的路径。您可以使用 google.maps.SymbolPath 中的某个预定义路径,也可以使用 SVG 路径表示法定义自定义路径。注意:多段线上的矢量路径必须在 22x22 像素的方形内。如果您的路径包括位于该方块之外的点,则必须将符号的 scale 属性调整为小数值(例如 0.2),以使生成的缩放点可容纳在该方块内。
  • anchor 设置符号相对于标记或多段线的位置。符号路径的坐标分别由锚点的 x 坐标和 y 坐标向左和向上平移。默认情况下,符号锚定在 (0, 0) 上。位置表示在与符号路径相同的坐标系中。
  • fillColor 是符号的填充色(即笔触旁边的区域)。支持所有 CSS3 颜色,扩展命名的颜色除外。 对于标记上的符号,默认颜色为“黑色”。对于多段线上的符号,默认值为对应多段线的描边颜色。
  • fillOpacity 定义符号填充的相对不透明度(即缺乏透明度)。值介于 0.0(完全透明)到 1.0(完全不透明)之间。默认值为 0.0。
  • rotation 是符号的旋转角度,以顺时针度数表示。默认情况下,符号标记的旋转角度为 0,多段线上的符号旋转角度取决于其所在的边缘的角度。设置多段线上符号的旋转角度时,符号的旋转角度将会固定下来,不再沿着线的曲线移动。
  • scale 设置符号的大小缩放量。对于符号标记,默认值为1。缩放后,符号可以任何大小。对于多段线上的符号,默认缩放级别为多段线的描边粗细。缩放后,符号必须位于 22x22 像素的正方形内,并以符号的锚点为中心。
  • 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 属性。以下示例使用 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;
查看示例

试用示例