9

我想在多段线路径上的 mouseover / mouseout 时显示和隐藏工具提示，问题是我的多段线路径的笔划宽度仅为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));

任何帮助，将不胜感激 ：）

4

1 回答 1

1

您可以在折线上使用不透明度为 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>

于 2015-03-18T23:15:45.923 回答