Question

我希望在折线路径上鼠标悬停/鼠标移动时显示和隐藏工具提示，问题是我的折线路径只有笔划宽度 2 ，因此不容易在鼠标悬停事件中击中该区域，这对用户体验肯定不方便。

我想知道是否有办法使用任意宽度使该击中区域更宽，但对用户不可见？

我的代码片段

path = new google.maps.Polyline(plotOptions);

        path.setMap(that.map);

        this.polyPathArray.push(path);

        google.maps.event.addListener(path, 'mouseover', (function(index) {

            return function(polyMouseevent) {
                $(".table>tbody>tr>td").removeClass('highlight');
                $(".table>tbody>tr").eq(index).find("td").addClass('highlight');

                var latlngVal = '';
                if(polyMouseevent) {
                    latlngVal = polyMouseevent.latLng;
                } else {
                    //calculate a random position on a polyline

                }

                that.infowindows[index].setPosition(latlngVal);
                that.infowindows[index].open(that.map);
            };
        })(i));

任何帮助将不胜感激：）

Answer 1

您可以在折线上使用不透明度为0且线条较宽的折线，并显示信息窗口。我认为user3513687有一个不同的问题，闪烁是由于光标位于InfoWindow顶部并且离线。像素偏移似乎可以解决该问题。这是一个片段，使用该小提琴中的代码作为起点：

＆＃13;

var map;

function initialize() {

  var mapOptions = {
    center: new google.maps.LatLng(-3, 23),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);

  var links = [];
  var link2 = [new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-4.5, 23.4)],
      link1 = [new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-3.5999999999999996, 18)];
  links.push(link1);
  links.push(link2);

  for (var i = 0; i < links.length; i++) {
    doJob(links[i]);
  }
}

function doJob(polyline_bounds) {
  var polyline;
  polyline = new google.maps.Polyline({
    path: polyline_bounds,
    strokeColor: "#0000FF",
    strokeOpacity: 0.5,
    strokeWeight: 2
  });

  invisiblePolyline = new google.maps.Polyline({
    path: polyline_bounds,
    strokeColor: "#0000FF",
    strokeOpacity: 0.0,
    strokeWeight: 20
  });

  polyline.setMap(map);
  invisiblePolyline.setMap(map);
  var info = new google.maps.InfoWindow({
    content: "Position",
    pixelOffset  : new google.maps.Size(0, -10)
  });

  google.maps.event.addListener(invisiblePolyline, 'mouseover', function (event) {
    polyline.setOptions({
      strokeOpacity: 1
    });
    info.setPosition(event.latLng);
    info.open(map);
  });

  google.maps.event.addListener(invisiblePolyline, 'mouseout', function (event) {
    polyline.setOptions({
      strokeOpacity:.5
    });
    info.close(map);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

html, body, #mapcanvas { margin: 0; padding: 0; height: 100% }

＆＃13;

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>

<body>

<div id="mapcanvas"></div>

</body>

＆＃13;

如何在折线地理中增加鼠标悬停“命中区域”

1 个答案: