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

Question

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

9

我想在鼠标悬停/移出折线路径时显示和隐藏工具提示，问题是我的折线路径只有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));

非常感谢您的帮助:)

- Shinoj

我也需要在类似的问题上得到帮助。链接：http://jsfiddle.net/9bg6x/125/。当你移动折线路径时，我的工具提示会不停地闪烁。请帮帮我.. :( - anusreemn

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- brenzy · Accepted Answer

您可以使用透明度为0的折线和更宽的描边覆盖在您的折线上，这样信息窗口就会出现。我认为user3513687有一个不同的问题，闪烁是由于光标进入InfoWindow并离开该线路造成的。像素偏移似乎可以解决这个问题。这里是一个片段，以那个小提琴中的代码作为起点：

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

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

<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>