个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
25
4
我想在多段线路径上鼠标悬停/鼠标移出时显示和隐藏工具提示，问题是我的多段线路径只有笔画宽度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 的顶部和离线。像素偏移似乎可以解决该问题。以下是使用该 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>关于javascript - 如何在折线地理图中增加鼠标悬停 “hit area”，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29115278/
25
4
0
有没有办法将多个线段视为 1 条线？ IE:我将鼠标悬停在其中一个上，两者都会突出显示，并且切换图例中的可见性将隐藏这两个部分。 http://jsfiddle.net/rayholland/HSvB
我正在使用 geojson 创建折线。我的geojson的格式如下: var myLines = [{ "type": "LineString", "coordinates": [[-
我对 matlab 和图像处理很陌生 我想要实现的是检测图像中的不规则线条。例如，在下图中，有 4 条折线: 我的目标是得到一组代表这 4 条不规则线/折线的像素点。像这样。 我已经通读了一些主题，例
本章响应小伙伴的反馈，除了算法自动画连接线（仍需优化完善），实现了可以手动绘制直线、折线连接线功能。 请大家动动小手，给我一个免费的 Star 吧~ 大家如果发现了 Bug，欢迎来提 Is
这一章把直线连接改为折线连接，沿用原来连接点的关系信息。关于折线的计算，使用的是开源的 AStar 算法进行路径规划，启发方式为 曼哈顿距离，且不允许对角线移动。 请大家动动小手，给我一个免费
话接上回《前端使用 Konva 实现可视化设计器（13）- 折线 - 最优路径应用【思路篇】》，这一章继续说说相关的代码如何构思的，如何一步步构建数据模型可供 AStar 算法进行路径规划，最终画出节
是否可以使用水平线性渐变描边 SVG 多段线，其中渐变的角度在每个多段线顶点发生变化？它看起来像这样: 最佳答案 看看tubefy以色列艾森伯格。目前 svg 中没有任何内容可以准确地以声明方式提供您
我已经实现了一些代码，可以在单击 ListView 项时从 URL 加载图像；这已经用“虚拟”图像进行了测试，并且在 ImageView 对象中显示的图像没有任何问题。 但是，我真正想做的是通过 UR
我正在编写一个函数，用于在 mouseover 和 mouseout 上添加和删除 Mapbox polyline。我的 mouseover 可以正常工作，但我似乎不知道如何在 mouseout 上访
我使用此代码在 OSM 上有一些自定义折线 var polyline1 = [ [44.772142, 17.208980], [44.774753, 17.20764
我的应用程序是实时跟踪器，多个用户登录并通过将他们的坐标发送到我们的网络服务来更新他们的位置，然后每 2 分钟回调一次，让我们在我的 MapView 上显示所有用户。 每次我在 connectionD
我想知道是否有一种方法可以通过单击来突出折线。像这样: Before click After click 最佳答案 您可以使用折线两次。第一次折线更宽并且笔划不透明度为“0”。当您将鼠标悬停在该组上时
我需要显示从 A 到 B 的不同折线。因此，这些线应该彼此区分。我曾尝试使用带有高度参数的推点函数来设置折线。然而它仍然在地面上。我插入的最后一条折线会覆盖前一条折线。高度值适用于标记，但我想将其应用
我正在尝试向 svg 多段线添加类似叠加的效果。基本目标是使单击该线变得容易，并且由于该线太细，我想添加一个背景叠加层，当鼠标悬停在上面时会亮起。 我使用多边形尝试了以下方法，但这看起来很乏味。 (线
如何在 Google map 中绘制圆弧折线？ 我已经用过this创建曲线折线的代码。 下面是绘制曲线折线的方法: private void showCurvedPolyline (LatLng p1
背景: 开发使用 Android Google Map v2 的原生 Android 应用，使用 android.support.v4.app.FragmentActivity。在 Android v
如何使用 JavaScript 将坐标添加到现有的 SVG 折线？ 我正在使用 IE 9(在 .hta 文件中)并且需要能够动态地将新点附加到折线。目标是能够创建折线图。我提前道歉，我完
如何在 JavaScript 中拆分数据数组 {x:30, y:45, x:36, y:49} 进入表格 [30, 45, 36, 49] ？ 我需要此表单才能将坐标传递给 SVG 折线。我找到了一个
在角度 6 中。我正在为 agm-polyline 使用流动代码。 我想在 agm-polyline 中添加箭头符号(折线)( https://developers.google.com/maps/d
我在 map 上做了路线。使用一些坐标生成的路线，这些坐标完成了附加信息(速度)。我希望当路线悬停时，将出现一个工具提示并显示这些坐标处的信息(速度)。我很困惑如何显示速度的工具提示。 Po
我是一名优秀的程序员,十分优秀！