Слушатель событий карты Google для «сгруппированной» полилинии и маркеров

Question

Я создаю карту Google для пеших прогулок.Каждый отдельный поход отображается полилинией.Каждый отдельный поход также имеет начальное и конечное местоположение (на любом конце полилинии).Начальное и конечное местоположения отображаются маркером (НЕ символом).Я потратил часы, пытаясь добавить функциональность, чтобы при возникновении события наведения курсора на ЛЮБОЙ полилинии ИЛИ на любом из маркеров «полилиния» и оба маркера «реагировали» (в этом случае непрозрачность изменится).

Я часами пытался найти решение.Самый близкий у меня есть код ниже.В приведенном ниже коде полилиния и маркеры будут реагировать только при наведении курсора мыши на полилинию.Но если мышь перемещается над любым маркером, полилиния и маркеры не реагируют.Я понимаю, что мой код неверен, но я не могу приблизиться к решению.

Думаю, мне нужно как-то "сгруппировать" каждую ломаную линию и соответствующие 2 маркера в один "объект", "переменную" или "слой "- но я просто не могу решить это.

Обратите внимание, что приведенный ниже код упрощен только для одного маркера (начального местоположения) для каждой полилинии (похода).

(В верхней части кода ниже находится файл gpx, из которого ломаная имаркеры созданы. Скопируйте данные gpx в файл и назовите google.gpx)

//start of the trimmed gpx data. Copy to new file and save as google.gpx
<lines>
    <trkseg>
        <trkpt lat="-33.879843" lng="151.225769"/>
        <trkpt lat="-33.869843" lng="151.245769"/>
        <trkpt lat="-33.859843" lng="151.255769"/>
    </trkseg>
    <trkseg>
        <trkpt lat="-33.869843" lng="151.265769"/>
        <trkpt lat="-33.869843" lng="151.275769"/>
    </trkseg>
</lines>
//end of the trimmed gpx data

<style>
    #map {
        height: 100%;
    }
</style>

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

<script>
    function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(-33.863276, 151.207977),
      zoom: 12
    });

        downloadUrl('google.gpx', function(data) {
            var xml = data.responseXML;
            var trkseg = xml.querySelectorAll("trkseg");

            for (var l = 0; l < trkseg.length; l++) {
                var path = [],
                trkPoints = trkseg[l].querySelectorAll('trkpt');

                for (var p = 0; p < trkPoints.length; p++) {
                    var trkpt = trkPoints[p],
                    lat = parseFloat(trkpt.getAttribute("lat")),
                    lng = parseFloat(trkpt.getAttribute("lng")),
                    point = new google.maps.LatLng(lat, lng);
                    path.push(point);
                }

                var trkptMarker = trkPoints[0];
                var startMarkerLat = parseFloat(trkptMarker.getAttribute("lat"));
                var startMarkerLng = parseFloat(trkptMarker.getAttribute("lng"));
                var startMarkerLatLng = {lat: startMarkerLat, lng: startMarkerLng};
                var startIcon = 'https://stunninghikes.com/wp-content/uploads/2018/08/hike_start_pin_circular-e1534182115238.png';
                var startIconImage = new google.maps.MarkerImage(startIcon);

                var polyline = new google.maps.Polyline({
                    path: path,
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.5,
                    strokeWeight: 2,

                    startMarker: new google.maps.Marker({
                        position: startMarkerLatLng,
                        map: map,
                        opacity: 0.5,
                        icon: startIconImage,
                        zIndex: 10
                    }),
                });

                polyline.setMap(map);

                google.maps.event.addListener(polyline, 'mouseover', function(event) {
                    this.get('startMarker').setOptions({
                        opacity: 1.0,
                    });
                    this.setOptions({
                        strokeColor: '#128934',
                        strokeOpacity: 1,
                        strokeWeight: 5,
                    });
                });

                google.maps.event.addListener(polyline, 'mouseout', function(event) {
                    this.get('startMarker').setOptions({
                        opacity: 0.5,
                    });
                    this.setOptions({
                        strokeColor: '#FF0000',
                        strokeOpacity: 0.5,
                        strokeWeight: 2
                    });
                });
            }
        });
    }

  function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;

    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        request.onreadystatechange = doNothing;
        callback(request, request.status);
      }
    };

    request.open('GET', url, true);
    request.send(null);
  } 

  function doNothing() {}
</script>

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=GOOGLEKEY&&callback=initMap">
</script>

Answer 1

Простейший вариант с учетом существующего кода - добавить эквивалентные указатели мыши / указателя мыши к маркеру:

var startMarker = new google.maps.Marker({
  position: startMarkerLatLng,
  map: map,
  opacity: 0.5,
  icon: startIconImage,
  zIndex: 10
});
var polyline = new google.maps.Polyline({
  path: path,
  strokeColor: '#FF0000',
  strokeOpacity: 0.5,
  strokeWeight: 2,
  map: map,
  startMarker: startMarker
});
startMarker.set("polyline", polyline);

google.maps.event.addListener(polyline, 'mouseover', function(event) {
  this.get('startMarker').setOptions({
    opacity: 1.0,
  });
  this.setOptions({
    strokeColor: '#128934',
    strokeOpacity: 1,
    strokeWeight: 5,
  });
});

google.maps.event.addListener(polyline, 'mouseout', function(event) {
  this.get('startMarker').setOptions({
    opacity: 0.5,
  });
  this.setOptions({
    strokeColor: '#FF0000',
    strokeOpacity: 0.5,
    strokeWeight: 2
  });
});
google.maps.event.addListener(startMarker, 'mouseover', function(event) {
  this.setOptions({
    opacity: 1.0,
  });
  this.get("polyline").setOptions({
    strokeColor: '#128934',
    strokeOpacity: 1,
    strokeWeight: 5,
  });
});

google.maps.event.addListener(startMarker, 'mouseout', function(event) {
  this.setOptions({
    opacity: 0.5,
  });
  this.get("polyline").setOptions({
    strokeColor: '#FF0000',
    strokeOpacity: 0.5,
    strokeWeight: 2
  });
});

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

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

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  var xml = parseXml(xmlStr);
  var trkseg = xml.querySelectorAll("trkseg");

  for (var l = 0; l < trkseg.length; l++) {
    var path = [],
      trkPoints = trkseg[l].querySelectorAll('trkpt');

    for (var p = 0; p < trkPoints.length; p++) {
      var trkpt = trkPoints[p],
        lat = parseFloat(trkpt.getAttribute("lat")),
        lng = parseFloat(trkpt.getAttribute("lng")),
        point = new google.maps.LatLng(lat, lng);
      path.push(point);
      bounds.extend(point);
    }

    var trkptMarker = trkPoints[0];
    var startMarkerLat = parseFloat(trkptMarker.getAttribute("lat"));
    var startMarkerLng = parseFloat(trkptMarker.getAttribute("lng"));
    var startMarkerLatLng = {
      lat: startMarkerLat,
      lng: startMarkerLng
    };
    var startIcon = 'https://stunninghikes.com/wp-content/uploads/2018/08/hike_start_pin_circular-e1534182115238.png';
    var startIconImage = new google.maps.MarkerImage(startIcon);
    var startMarker = new google.maps.Marker({
      position: startMarkerLatLng,
      map: map,
      opacity: 0.5,
      icon: startIconImage,
      zIndex: 10
    });
    var polyline = new google.maps.Polyline({
      path: path,
      strokeColor: '#FF0000',
      strokeOpacity: 0.5,
      strokeWeight: 2,
      map: map,
      startMarker: startMarker
    });
    startMarker.set("polyline", polyline);

    google.maps.event.addListener(polyline, 'mouseover', function(event) {
      this.get('startMarker').setOptions({
        opacity: 1.0,
      });
      this.setOptions({
        strokeColor: '#128934',
        strokeOpacity: 1,
        strokeWeight: 5,
      });
    });

    google.maps.event.addListener(polyline, 'mouseout', function(event) {
      this.get('startMarker').setOptions({
        opacity: 0.5,
      });
      this.setOptions({
        strokeColor: '#FF0000',
        strokeOpacity: 0.5,
        strokeWeight: 2
      });
    });
    google.maps.event.addListener(startMarker, 'mouseover', function(event) {
      this.setOptions({
        opacity: 1.0,
      });
      this.get("polyline").setOptions({
        strokeColor: '#128934',
        strokeOpacity: 1,
        strokeWeight: 5,
      });
    });

    google.maps.event.addListener(startMarker, 'mouseout', function(event) {
      this.setOptions({
        opacity: 0.5,
      });
      this.get("polyline").setOptions({
        strokeColor: '#FF0000',
        strokeOpacity: 0.5,
        strokeWeight: 2
      });
    });

  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);

function parseXml(str) {
  if (window.ActiveXObject) {
    var doc = new ActiveXObject('MicrosoftXMLDOM');
    doc.loadXML(str);
    return doc;
  } else if (window.DOMParser) {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }
}
var xmlStr = '<lines><trkseg><trkpt lat="-33.879843" lng="151.225769"/><trkpt lat="-33.869843" lng="151.245769"/><trkpt lat="-33.859843" lng="151.255769"/></trkseg><trkseg><trkpt lat="-33.869843" lng="151.265769"/><trkpt lat="-33.869843" lng="151.275769"/></trkseg></lines>';

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>