如何在多段线地图中增加鼠标悬停“点击区域”

Question

我想在多段线路径上鼠标悬停/鼠标移出时显示和隐藏工具提示，问题是我的多段线路径只有笔划宽度 2，所以也是在mouseover事件中不容易点击到那个区域，那肯定不方便用户体验。

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

下面是我的代码片段

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 的多段线，并在多段线上使用更宽的描边，然后会显示信息 window。我认为 user3513687 有不同的问题，闪烁是由于光标在 InfoWindow 的顶部和离线。像素偏移似乎可以解决该问题。这是使用 fiddle 中的代码作为起点的片段：

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>

如何在多段线地图中增加鼠标悬停“点击区域”

How to increase mouseover “hit area” in polyline geomap

javascript

geocode

geomap

google-polyline