使用SVG路径在多段线上创建自定义符号 [英] Create custom symbol on polyline using SVG path
本文介绍了使用SVG路径在多段线上创建自定义符号的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正尝试使用带动画的Google地图创建航班路线。是否可以使用 http：//演示站点中的飞机自定义符号创建多段线路径www.morethanamap.com/demos/visualization/flights
我可以用动画创建虚线路径。问题是我一直在创建SVG路径。我曾尝试从 https：//开发者呈现贝塞尔曲线。 mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths ，路径为M10 10 C 20 20,40 20,50 10，但无济于事。
new google.maps.Polyline（{
path：[
new google.maps.LatLng（40，-80），
new google.maps.LatLng（-50，80）
]，
测地线：true，
strokeOpacity：0.0，
strokeColor：'yellow'，
图标：[{
图标：{
路径：'M 0，-2 0,2'，
strokeColor：'red'，
strokeOpacity：1.0，
}，
重复：'24px'
}]，
map：map，
}）;
解决方案
该演示中使用的SVG路径为：
M362.985,430.7241-10.248,51.234162.332,57.9691-3.293,36.145 1-71.345-23.5991-2.001,13.069 1-2.057-13.5291 -71.278,22.9281-5.762-23.984 16.097-59.271 1 -8.913-51.359 10.858-114.43 1 -21.945-11.3381-189.358,88.76 1-1.18-3 2.2621213.344- 180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238.3.65 16.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479- 90.61l-21.616,10.087l-0.094,115.684
我把它粘贴到这个演示在线svg编辑器，按比例缩放。
var planeSymbol = {
path：'M362.985,430.724l-10.248,51.234l62.332,57.969l- 3.293,26.145 1 -71.345-23.5991-2.001,13.0691-2.057-13.5291-7.1.278,22.9281-5.762-23.98416.097-59.271 1- 8.913-51.359-0.858-114.43 1-21.945-11.338 1- 189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.6516.367,14.925l7.369,30.363v106。 375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684'，
比例：0.0333，
strokeOpacity：1，
颜色：'black' ，
strokeWeight：1
};
程式码片段：
function initialize（）{var mapOptions = {zoom：6，center：new google.maps.LatLng（20.291，153.027），mapTypeId：google.maps.MapTypeId.TERRAIN}; var map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; // [START region_polyline] //使用SVG路径表示法定义符号，其透明度为1. var planeSymbol = {path：'M362.985,430.7241-10.248,51.234162.332,57.9691-3.293,26.145 l-71.345 -23.5991-2.0013.0691-2.057-13.5291 -71.278,22.9281-5.762-23.984-16.097-59.271 1- 8.913-51.359-0.858-114.43 1-2945-11.3381-189.358,88.761-1.18 -32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.6516.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496 ，32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684'，尺度：0.0333，strokeOpacity：1，颜色：'black'，strokeWeight：1，anchor：new google.maps.Point（300,300） }; var lineCoordinates = [new google.maps.LatLng（22.291,154.027），new google.maps.LatLng（21.291,155.027），new google.maps.LatLng（20.291,156.027），new google.maps.LatLng（45.291,158.027） ），new google.maps.LatLng（51.47238，-0.45093999999994594）]; var visibleLine = new google.maps.Polyline（{path：lineCoordinates，strokeOpacity：0.3，map：map}）; var staticMark = new google.maps.Marker（{map：map，position：lineCoordinates [0]，icon：planeSymbol，visible：false //隐藏静态标记}）; var bounds = new google.maps.LatLngBounds（）; bounds.extend（lineCoordinates [0]）; bounds.extend（lineCoordinates [4]）; //创建折线，在'icons'属性中传递符号。 //线条不透明度为0。var line = new google.maps.Polyline（{path：lineCoordinates，strokeOpacity：0，icons：[{icon：planeSymbol，offset：'0'}]，map：map}） ; map.fitBounds（边界）; animatePlane（线）; // [END region_polyline]} //使用DOM setInterval（）函数以固定的时间间隔更改符号的偏移量。 window.setInterval（function（）{count =（count + 1）％2000; var icons = line.get（'icons'）;图标[0] .offset =（count / 20）+'％'; line.set （'icons'，icons）;}，20）;} google.maps.event.addDomListener（window，'load'，initialize）;
html，body，＃map-canvas {height：100％;宽度：100％; margin：0px; < script src =https：//
I am trying to create a flight route using google maps with animation. Is it possible to create a polyline path with custom symbol of airplane as in the demo site of http://www.morethanamap.com/demos/visualization/flights
I am able to create a dashed path with animation. The problem is I have am stuck with creating SVG path. I did try to render a Bezier Curves from https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths with path given as "M10 10 C 20 20, 40 20, 50 10" but to no avail.
new google.maps.Polyline({
path: [
new google.maps.LatLng(40, -80),
new google.maps.LatLng(-50, 80)
],
geodesic: true,
strokeOpacity: 0.0,
strokeColor: 'yellow',
icons: [{
icon: {
path: 'M 0,-2 0,2',
strokeColor: 'red',
strokeOpacity: 1.0,
},
repeat: '24px'
}],
map: map,
});
解决方案
The SVG path used on that demo is:
M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-3 2.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684
I pasted that into this demo online svg editor, scaled to fit.
var planeSymbol = {
path: 'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684',
scale: 0.0333,
strokeOpacity: 1,
color: 'black',
strokeWeight: 1
};
code snippet:
function initialize() {
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(20.291, 153.027),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// [START region_polyline]
// Define a symbol using SVG path notation, with an opacity of 1.
var planeSymbol = {
path: 'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684',
scale: 0.0333,
strokeOpacity: 1,
color: 'black',
strokeWeight: 1,
anchor: new google.maps.Point(300, 300)
};
var lineCoordinates = [
new google.maps.LatLng(22.291, 154.027),
new google.maps.LatLng(21.291, 155.027),
new google.maps.LatLng(20.291, 156.027),
new google.maps.LatLng(45.291, 158.027),
new google.maps.LatLng(51.47238, -0.45093999999994594)
];
var visibleLine = new google.maps.Polyline({
path: lineCoordinates,
strokeOpacity: 0.3,
map: map
});
var staticMark = new google.maps.Marker({
map: map,
position: lineCoordinates[0],
icon: planeSymbol,
visible: false // hide the static marker
});
var bounds = new google.maps.LatLngBounds();
bounds.extend(lineCoordinates[0]);
bounds.extend(lineCoordinates[4]);
// Create the polyline, passing the symbol in the 'icons' property.
// Give the line an opacity of 0.
var line = new google.maps.Polyline({
path: lineCoordinates,
strokeOpacity: 0,
icons: [{
icon: planeSymbol,
offset: '0'
}],
map: map
});
map.fitBounds(bounds);
animatePlane(line);
// [END region_polyline]
}
// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animatePlane(line) {
var count = 0;
window.setInterval(function() {
count = (count + 1) % 2000;
var icons = line.get('icons');
icons[0].offset = (count / 20) + '%';
line.set('icons', icons);
}, 20);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
这篇关于使用SVG路径在多段线上创建自定义符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
