Карты Google: при щелчке измените цвет полилинии, но при нажатии второй полилинии измените цвет на исходный. - PullRequest
Новая
       11

Карты Google: при щелчке измените цвет полилинии, но при нажатии второй полилинии измените цвет на исходный.

0 голосов
/ 08 ноября 2018

У меня есть сайт с многочисленными пешеходными маршрутами, отображаемыми в виде полилиний на картах Google.Все полилинии имеют Strokecolor зеленый по умолчанию.Мне бы хотелось, чтобы при нажатии на полилинию ее цвет становился красным.Он должен оставаться красным, пока не будет нажата вторая (другая) полилиния.Первая полилиния должна затем стать зеленой, а вторая - красной.

Я искал и искал и пробовал множество решений, но ни одно из них не работает.

Отправленный мною «тестовый» код «чистый» без каких-либо неудачных попыток.

 <!DOCTYPE html>
    <html>
      <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
          #map {
            height: 100%;
          }
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
        </style>
      </head>
      <body>
        <div id="map"></div>
        <script>
          var map;
          var flightPath;
          var pathSymbol;
          function initMap() {
            pathSymbol = {
                path: google.maps.SymbolPath.CIRCLE,
                strokeColor: '#FF0000',
                strokeOpacity: 1,
                strokeWeight: 4,
                fillColor: '#FF0000',
                fillOpacity: 1,
                scale: 3
            };

              map = new google.maps.Map(document.getElementById('map'), {
                  center: {lat: 45, lng: -87},
                  zoom: 6
              });

              var flightPlanCoordinates = [
                  { lat: 42.5, lng: -86.5 },
                  { lat: 42.5, lng: -87.5},
                  { lat: 43.5, lng: -88.5 },
                  { lat: 44.5, lng: -88.5 },
                  { lat: 46.5, lng: -89.5 },
                  { lat: 49.5, lng: -89.5 },
              ];
              var flightPlanCoordinates2 = [
                  { lat: 42, lng: -86 },
                  { lat: 42, lng: -87},
                  { lat: 42, lng: -88 },
                  { lat: 43, lng: -88 },
                  { lat: 44, lng: -89 },
                  { lat: 49, lng: -89 },
              ];
              var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];

              for (let i = 0; i < 2; i++) {
                  addPath({
                    path: arrayOfFlightPlans[i],
                    strokeColor: '#8CB65F',
                    strokeOpacity: 1.0,
                    strokeWeight: 4,
                  });
                }
          }

          function addPath(props) {
            flightPath = new google.maps.Polyline({
              path: props.path,
              strokeColor: props.strokeColor,
              strokeOpacity: props.strokeOpacity,
              strokeWeight: props.strokeWeight
            });
            flightPath.setMap(map);

            flightPath.addListener('mouseover', function(event) {
              this.setOptions({
                zIndex: 10,
                icons: [{
                  icon: pathSymbol,
                  offset: '0',
                  repeat: '40px',
                  zIndex: 10
                }],
              });
            });

            flightPath.addListener('mouseout', function(event) {
              this.setOptions({
                zIndex: 0,
                icons: [{
                  visible: false,
                  zIndex: 0
                }],
              });
            });

          }
        </script>

      </body>
    </html>

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

Один из вариантов - сохранить ссылки на все полилинии, обработать этот список, щелкнув по ним значение по умолчанию, а затем установить текущую полилинию на «выбранный цвет». 

var polylines = [];
function addPath(props) {
  flightPath = new google.maps.Polyline({
    path: props.path,
    strokeColor: props.strokeColor,
    strokeOpacity: props.strokeOpacity,
    strokeWeight: props.strokeWeight,
    normalOptions: {
      strokeColor: props.strokeColor,
    },
    selectedOptions: {
      strokeColor: "red",
    }
  });
  flightPath.setMap(map);
  polylines.push(flightPath);

  flightPath.addListener('mouseover', function(event) {
    this.setOptions({
      zIndex: 10,
      icons: [{
        icon: pathSymbol,
        offset: '0',
        repeat: '40px',
        zIndex: 10
      }],
    });
  });

  flightPath.addListener('mouseout', function(event) {
    this.setOptions({
     zIndex: 0,
      icons: [{
        visible: false,
        zIndex: 0
      }],
    });
  });
  flightPath.addListener('click', function(event) {
    for (var i=0; i<polylines.length; i++) {
      polylines[i].setOptions(polylines[i].normalOptions)
    }
    this.setOptions(this.selectedOptions);
  })
}

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

screenshot of resulting map

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<style>
  #map {
    height: 100%;
  }
  
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
<div id="map"></div>
<script>
  var map;
  var flightPath;
  var pathSymbol;

  function initMap() {
    pathSymbol = {
      path: google.maps.SymbolPath.CIRCLE,
      strokeColor: '#FF0000',
      strokeOpacity: 1,
      strokeWeight: 4,
      fillColor: '#FF0000',
      fillOpacity: 1,
      scale: 3
    };

    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: 45,
        lng: -87
      },
      zoom: 6
    });

    var flightPlanCoordinates = [
      { lat: 42.5, lng: -86.5 },
      { lat: 42.5, lng: -87.5},
      { lat: 43.5, lng: -88.5 },
      { lat: 44.5, lng: -88.5 },
      { lat: 46.5, lng: -89.5 },
      { lat: 49.5, lng: -89.5 },
    ];
    var flightPlanCoordinates2 = [
      { lat: 42, lng: -86 },
      { lat: 42, lng: -87},
      { lat: 42, lng: -88 },
      { lat: 43, lng: -88 },
      { lat: 44, lng: -89 },
      { lat: 49, lng: -89 },
    ];
    var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];

    for (let i = 0; i < 2; i++) {
      addPath({
        path: arrayOfFlightPlans[i],
        strokeColor: '#8CB65F',
        strokeOpacity: 1.0,
        strokeWeight: 4,
      });
    }
  }
  var polylines = [];

  function addPath(props) {
    flightPath = new google.maps.Polyline({
      path: props.path,
      strokeColor: props.strokeColor,
      strokeOpacity: props.strokeOpacity,
      strokeWeight: props.strokeWeight,
      normalOptions: {
        strokeColor: props.strokeColor,
      },
      selectedOptions: {
        strokeColor: "red",
      }
    });
    flightPath.setMap(map);
    polylines.push(flightPath);

    flightPath.addListener('mouseover', function(event) {
      this.setOptions({
        zIndex: 10,
        icons: [{
          icon: pathSymbol,
          offset: '0',
          repeat: '40px',
          zIndex: 10
        }],
      });
    });

    flightPath.addListener('mouseout', function(event) {
      this.setOptions({
        zIndex: 0,
        icons: [{
          visible: false,
          zIndex: 0
        }],
      });
    });
    flightPath.addListener('click', function(event) {
      for (var i = 0; i < polylines.length; i++) {
        polylines[i].setOptions(polylines[i].normalOptions)
      }
      this.setOptions(this.selectedOptions);
    })
  }
  google.maps.event.addDomListener(window, 'load', initMap);
</script>
0 голосов
/ 08 ноября 2018

добавить глобальную переменную .. предыдущий путь и назначить значение объекта при щелчке объекта, затем изменить цвет для фактического объекта и восстановить цвет для объекта prev_path 

var prev_path;


     flightPath.addListener('click', function(event) {

        this.setOptions({
            zIndex: 10,
            strokeColor: your_strokeColor,
            strokeOpacity: your_strokeOpacity,
            strokeWeight: your__strokeWeight 
            icons: [{
              icon: pathSymbol,
              offset: '0',
              repeat: '40px',
              zIndex: 10
            }],
          });

        if (prevPath){
          prev_path.setOptions({
              zIndex: 10,
            strokeColor: your_color_for_not_select_strokeColor,
            strokeOpacity: your_color_for_not_select_strokeOpacity,
            strokeWeight: your_color_for_not_select_strokeWeight 
          });
        }

        prev_path = this;

    });
...