简介
Symbol 是一种基于矢量的图标，可显示在 Marker 或 Polyline 对象上。符号的形状是使用 SVG 路径表示法通过路径定义的。虽然 path 是唯一的必需属性，但 Symbol 对象支持多种属性，让您可以自定义视觉元素（例如，描边/填充的颜色和粗细）。请参阅属性列表。
一些预定义符号可通过 SymbolPath 类获得。请参见下表。
符号的属性
请注意，根据 Symbol 是显示在标记上还是多段线上，其默认行为会略有不同。下面的属性列表介绍了这些差异。
Symbol 支持以下属性：
path（必需）表示用于定义符号形状的路径。您可以使用google.maps.SymbolPath中的某个预定义路径，也可以使用 SVG 路径表示法自定义路径。注意：多段线上的矢量路径不得超出 22x22 像素的方形范围。如果您的路径包含的点超出此方形范围，那么您必须将符号的scale属性调整为小数值（例如 0.2），这样生成的调整后的点便位于该方形范围内。anchor设置符号相对于标记或多段线的位置。符号路径的坐标按锚点的 x 坐标和 y 坐标分别向左和向上平移。默认情况下，符号锚定在(0, 0)位置。位置使用与符号路径相同的坐标系表示。fillColor表示符号的填充（即用描边框住的区域）颜色。支持所有的 CSS3 颜色，扩展的具名颜色除外。对于标记上的符号，默认值为“black”。对于多段线上的符号，默认值为相应多段线的描边颜色。fillOpacity定义符号填充的相对不透明度（与透明度相反）。该值介于 0.0（完全透明）至 1.0（完全不透明）之间。默认值为 0.0。rotation表示符号的旋转角度，以顺时针度数表示。默认情况下，符号标记的旋转角度为 0，而多段线上的符号则按其所在边缘的角度旋转。设置多段线上符号的旋转角度会固定符号的旋转角度，这样符号就不会再依循线段的曲度。scale设置符号的大小缩放比例。对于符号标记，默认缩放比例为 1。缩放后的符号大小不受限制。对于多段线上的符号，默认缩放比例为多段线的描边粗细。经过缩放后，符号必须位于 22x22 像素的方形（以符号的锚点为中心）范围内。strokeColor表示符号的轮廓颜色。支持所有的 CSS3 颜色，扩展的具名颜色除外。对于标记上的符号，默认值为“black”。对于多段线上的符号，默认颜色为多段线的描边颜色。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: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.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(0, 20), }; 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: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.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(0, 20), }; new google.maps.Marker({ position: map.getCenter(), icon: svgMarker, map: map, }); } window.initMap = initMap;
试用示例
向多段线添加符号
若要在多段线上显示符号，请设置 PolylineOptions 对象的 icons[] 属性。icons[] 数组接受一个或多个包含以下属性的 IconSequence 对象字面量：
icon（必需）表示要渲染到线条上的符号。offset用于确定距线条起点（图标渲染位置）的距离。该距离可以线条长度百分比（例如“50%”）或像素（例如“50 像素”）表示。默认值为“100%”。repeat用于确定线条上连续图标的间距。该距离可以线条长度百分比（例如“50%”）或像素（例如“50 像素”）表示。若要停用图标重复，请指定“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;