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

现有代码中最简单的选择是将等效的mouseover / mouseout侦听器添加到标记：

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
  });
});

proof of concept fiddle

代码段：

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>

Google地图事件监听器，用于“分组”折线和标记

1 个答案: