Question

这应该有一个简单的答案，但我现在似乎找不到。

我有一条描绘路线的折线，如下所示：

    var lineSymbol2 = {
      path: 'M 0,-1 0,1',
      strokeOpacity: 1,
      scale: 2
    };


  ORoute = new google.maps.Polyline({
      path: ORouteLine,
      strokeOpacity: 0,
  strokeWeight: 1,
  geodesic: true,
      strokeColor: '#00FFFF',
      zIndex: -10,
  visible: false,
      icons: [{
        icon: lineSymbol2,
        offset: '0',
        repeat: '10px'
      }],
      map: map
    });

它可以完美显示，但是有没有办法改变虚线的不透明度，例如使它随着时间的推移逐渐淡入，从透明变为不透明？我有很多行显示相同的虚线外观。我应该知道答案，但是我现在有点迷茫。

顺便说一句，在切换直线时，我在其他地方将可见字段设置为true

Answer 1

如果要动态更改折线上符号的不透明度，则需要一个setTimeout或setInterval函数来实现。

var opacity = 0;
var intervalHandler = setInterval(function() {
  if (opacity >= 1) {
    opacity = 1;
    var icons = ORoute.get("icons");
    icons[0].icon.strokeOpacity = opacity;
    ORoute.setOptions({icons:icons});
    clearInterval(intervalHandler);
  } else {
    opacity += 0.01;
    if (opacity >= 1) opacity = 1;
    var icons = ORoute.get("icons");
    icons[0].icon.strokeOpacity = opacity;
    ORoute.setOptions({icons:icons});
  }
}, 100)

proof of concept fiddle

代码段：

var map;
var ORoute;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: 0,
      lng: -180
    },
    mapTypeId: 'terrain'
  });

  var ORouteLine = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];

  var lineSymbol2 = {
    path: 'M 0,-1 0,1',
    strokeOpacity: 0,
    scale: 2
  };

  ORoute = new google.maps.Polyline({
    path: ORouteLine,
    strokeOpacity: 0,
    strokeWeight: 1,
    geodesic: true,
    strokeColor: '#000000',
    zIndex: -10,
    visible: true,
    icons: [{
      icon: lineSymbol2,
      offset: '0',
      repeat: '10px'
    }],
    map: map
  });

  var opacity = 0;
  var intervalHandler = setInterval(function() {
    if (opacity >= 1) {
      opacity = 1;
      var icons = ORoute.get("icons");
      icons[0].icon.strokeOpacity = opacity;
      ORoute.setOptions({icons:icons});
      clearInterval(intervalHandler);
    } else {
      opacity += 0.01;
      if (opacity >= 1) opacity = 1;
      var icons = ORoute.get("icons");
      icons[0].icon.strokeOpacity = opacity;
      ORoute.setOptions({icons:icons});
    }
  }, 100)
}

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>

Google地图更改自定义线的不透明度

1 个答案: