Google地图官方API-在地图上绘图（自定义符号）
符号介绍当您想在标记上使用基于矢量的图标或将图像添加到折线时，符号非常有用 。 标记支持栅格图像和矢量图像的使用。请参阅有关自定义标记图标的文档 。A 是可以显示在或对象上的基于矢量的图像 。符号的形状由使用SVG路径符号的路径定义 。虽然是唯一必需的属性，但该 对象支持多种属性，使您可以自定义视觉外观，例如笔触和填充的颜色和粗细。请参阅下面的属性列表。 SymbolMarkerPolylinepathSymbol 通过SymbolPath 该类可以使用几个预定义的符号。请参阅下面的列表。 符号的属性请注意，a的默认行为Symbol取决于它出现在标记还是折线上而略有不同。这些差异在下面的属性列表中描述。 A Symbol支持以下属性： path（必填）是定义符号形状的路径。您可以在其中使用预定义的路径之一，也可以使用 SVG路径符号定义自定义路径 。注意：折线上的矢量路径必须适合22x22px的正方形。如果路径中包括该正方形以外的点，则必须将符号的属性调整为分数值（例如0.2），以使生成的缩放点适合正方形。 google.maps.SymbolPathscaleanchor设置符号相对于标记或折线的位置。符号路径的坐标分别通过锚点的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. 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 });} 查看示例。 向折线添加符号要在折线上显示符号，请设置对象的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.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()功能以固定间隔更改符号的偏移量来沿路径设置符号动画 。 // 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: '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);} 查看示例。
