Google Maps изменяют непрозрачность пользовательской линии - PullRequest
Новая
       11

Google Maps изменяют непрозрачность пользовательской линии

0 голосов
/ 14 апреля 2019

У этого должен быть простой ответ, но я не могу найти его прямо сейчас.

У меня есть полилиния, изображающая маршрут следующим образом: 

    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 в другом месте, так как переключаю строку

1 Ответ

1 голос
/ 14 апреля 2019

Если вы хотите динамически изменить непрозрачность символа на ломаной линии, вам нужна функция 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)

подтверждение концепции скрипки

фрагмент кода: 

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>
...