使用 SVG 路径在折线上创建自定义符号 [英] Create custom symbol on polyline using SVG path

问题描述

我正在尝试使用带有动画的谷歌地图创建飞行路线.是否可以在

代码片段:

function initialize() {var mapOptions = {变焦:6，中心:新的 google.maps.LatLng(20.291, 153.027)，mapTypeId: google.maps.MapTypeId.TERRAIN};var map = new google.maps.Map(document.getElementById('map-canvas'),地图选项);//[开始 region_polyline]//使用 SVG 路径符号定义一个符号，不透明度为 1.var 平面符号 = {路径:'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-13.072.7272-13.069l-13.072.7272.972.98272.982.982.982.7672.98559.271升-8.913-51.359l0.858-114.43 -1- 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.610l,706.375l211.592,182.082l-1.496,32.247l-188.479-90.610l,706.616,160.610.86规模:0.0333，中风不透明度:1，颜色:黑色'，行程重量:1，锚点:新 google.maps.Point(300, 300)};var lineCoordinates = [新的 google.maps.LatLng(22.291, 154.027),新的 google.maps.LatLng(21.291, 155.027),新的 google.maps.LatLng(20.291, 156.027),新的 google.maps.LatLng(45.291, 158.027),新的 google.maps.LatLng(51.47238, -0.45093999999994594)];var visibleLine = new google.maps.Polyline({路径:线坐标，中风不透明度:0.3，地图:地图});var staticMark = 新的 google.maps.Marker({地图:地图，位置:线坐标[0]，图标:平面符号，可见:假//隐藏静态标记});var bounds = new google.maps.LatLngBounds();bounds.extend(lineCoordinates[0]);bounds.extend(lineCoordinates[4]);//创建折线，在 'icons' 属性中传递符号.//赋予线条不透明度为 0.var line = new google.maps.Polyline({路径:线坐标，中风不透明度:0，图标:[{图标:平面符号，偏移量:'0'}],地图:地图});map.fitBounds(bounds);动画平面(线)；//[END region_polyline]}//使用 DOM setInterval() 函数改变交易品种的偏移量//在固定的时间间隔.功能动画平面(线){无功计数 = 0;window.setInterval(function() {计数 = (计数 + 1) % 2000;var icon = line.get('icons');图标[0].offset = (count/20) + '%';line.set('icons', 图标);}, 20);}google.maps.event.addDomListener(window, 'load', initialize);

html,身体，#地图画布{高度:100%；宽度:100%；边距:0px；填充:0px}

<script src="https://maps.googleapis.com/maps/api/js"></script><div id="map-canvas"></div>

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
 };

working example

proof of concept fiddle

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屋！