javascript - 谷歌地图 :adds an animated symbol to a polyline with dotted line set

Question

我想在这段代码中用虚线更改黑线，或者如何设置 line: 的 opacity:0

<div id="map"></div>
<script>

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 20.291, lng: 153.027},
      zoom: 6,
      mapTypeId: 'terrain'
    });


    var lineSymbol = {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 8,
      strokeColor: '#393'
    };

 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);
  }
</script>

这是谷歌地图的引用: google maps sample

如何用虚线更改该线

Answer 1

将 lineSymbol 的 linesOpacity 设置为 1(或大于 0)。

var lineSymbol = {
  path: google.maps.SymbolPath.CIRCLE,
  scale: 8,
  strokeColor: '#393',
  strokeOpacity: 1
};

proof of concept fiddle

代码片段:

// 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',
    strokeOpacity: 1,
  };
  // Define a symbol using SVG path notation, with an opacity of 1.
  var dashedLineSymbol = {
    path: 'M 0,-1 0,1',
    strokeOpacity: 1,
    scale: 4
  };

  // 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}],
    strokeOpacity: 0,
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }, {
      icon: dashedLineSymbol,
      offset: '0',
      repeat: '20px'
    }],
    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);
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>