Shi*_*noj 9 javascript geocode geomap google-polyline
我想在鼠标悬停/鼠标移动时在折线路径上显示和隐藏工具提示,问题是我的折线路径仅有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));
任何帮助,将不胜感激 :)
您可以使用不透明度为 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>