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

【问题标题】：How to increase mouseover “hit area” in polyline geomap如何在折线地理地图中增加鼠标悬停“命中区域”
【发布时间】：2015-03-18 06:12:43
【问题描述】：

当鼠标悬停/鼠标移出折线路径时，我想显示和隐藏工具提示，问题是我的折线路径只有 2 的笔划宽度，所以不容易打到鼠标悬停事件中的区域，这绝对不方便用户体验。

我想知道是否有一种方法可以使用任意宽度使该命中区域变宽，但对用户不可见？

下面我的代码的sn-p

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

任何帮助将不胜感激:)

【问题讨论】：

我在类似问题上也需要帮助。链接：jsfiddle.net/9bg6x/125。当您在折线路径上移动时，我的工具提示会一直闪烁。请帮忙.. :(

标签： javascript geocode google-polyline geomap

【解决方案1】：

您可以使用不透明度为 0 的多段线和更宽的笔划覆盖多段线，然后会出现信息窗口。我认为 user3513687 有一个不同的问题，闪烁是由于光标位于 InfoWindow 顶部并脱离了行。像素偏移似乎可以解决该问题。这是一个使用该小提琴中的代码作为起点的 sn-p：

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>

【讨论】：

感谢 user1205168。实现了同样的目标