Блог

Главная - Вопросы по программированию - Карты Google Изменение непрозрачности пользовательской строки

Карты Google Изменение непрозрачности пользовательской строки

#google-maps

#google-карты

Вопрос:

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

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

     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:

Если вы хотите динамически изменять непрозрачность символа на полилинии, вам нужна 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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qkamp;callback=initMap"></script>
Метки: