个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在将 ContextMenu 用于其预期目的以外的其他用途，但这个想法似乎不错，即在 google map 上用点之间的距离标记多段线。
我希望每次将鼠标悬停在显示该腿的距离的多段线上时显示标签。我确定距离没有问题，但是，标签总是显示最后一个条目的距离，而不是为那条腿确定的距离。
我正在创建一组多段线，以便每条多段线都可以显示点之间的距离，除了距离标签外，一切似乎都很好。
这是我想要实现的目标的简化版本。
var flightPath = [];
var distanceLables = [];
var map;
function initMap() {
//Google Map
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: 0,
lng: -180
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
//waypoints for the Polyline
var flightPlanCoordinates = [{
lat: 37.772,
lng: -122.214
}, {
lat: 21.291,
lng: -157.821
}, {
lat: -18.142,
lng: 178.431
}, {
lat: -27.467,
lng: 153.027
}];
//drawing each leg of the PolyLine indiviually so that mouseover/mouseout events can be customised to each leg
for (i = 0; i < flightPlanCoordinates.length - 1; i++) {
var tempCoords = [];
tempCoords.push(flightPlanCoordinates[i]);
tempCoords.push(flightPlanCoordinates[i + 1]);
flightPath.push(new google.maps.Polyline({
path: tempCoords,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
}));
//Creating the Context Menu which is just one line with the leg number
var contextMenuOptions = {};
contextMenuOptions.classNames = {
menu: 'context_menu displance_display',
menuSeparator: 'context_menu_separator'
};
var menuItems = [];
menuItems.push({
className: 'context_menu_item',
eventName: 'distance_click',
id: 'distanceItem',
label: 'Leg #' + i
}); //Label should represent the leg
contextMenuOptions.menuItems = menuItems;
var pos = distanceLables.push(new ContextMenu(map, contextMenuOptions)) - 1;
//mouseover/mouseout events to show and hide the label
google.maps.event.addListener(flightPath[i], 'mouseover', function(mouseEvent) {
distanceLables[pos].show(mouseEvent.latLng);
});
google.maps.event.addListener(flightPath[i], 'mouseout', function(mouseEvent) {
distanceLables[pos].hide();
});
}
} html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
.context_menu {
background-color: #ffff90;
border: 1px solid gray;
}
.context_menu_item {
padding: 3px 6px;
background-color: #ffff90;
}
.context_menu_item:hover {
background-color: #4b545f;
color: #fff;
}
.context_menu_separator {
background-color: gray;
height: 1px;
margin: 0;
padding: 0;
}<!DOCTYPE html>
<html>
<head>
<title>Problem</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type='text/javascript' src='http://maps.googleapis.com/maps/api/js?ver=4.2.2'></script>
<script src="http://code.martinpearman.co.uk/googlemapsapi/contextmenu/1.0/src/ContextMenu.js"></script>
</head>
<body onload="initMap()">
<div id="map"></div>
</body>
</html>谢谢，
斯图
最佳答案
问题是您要定义要在循环内的鼠标事件上显示的标签。现在它看起来有点像这样:
for (i = 0; i < flightPlanCoordinates.length - 1; i++) {
var pos = distanceLables.push(new ContextMenu(map, contextMenuOptions)) - 1;
google.maps.event.addListener(flightPath[i], 'mouseover', function(mouseEvent) {
distanceLables[pos].show(mouseEvent.latLng);
});
}
在鼠标悬停事件发生之前，匿名函数中的行不会被执行。所以你真正要做的是:
var pos = 0;
google.maps.event.addListener(flightPath[i], 'mouseover', function(mouseEvent) {...});
var pos = 1;
google.maps.event.addListener(flightPath[i], 'mouseover', function(mouseEvent) {...});
var pos = 2;
google.maps.event.addListener(flightPath[i], 'mouseover', function(mouseEvent) {...});
... etc
在循环结束时，pos = 数组的长度 - 1，因此当您将鼠标悬停在任何飞行路径部分上时，此行始终执行:
distanceLables[pos].show(mouseEvent.latLng);
即它总是会是:
distanceLables[3].show(mouseEvent.latLng);
另一种方法可能是这样的:
for (i = 0; i < flightPlanCoordinates.length - 1; i++) {
var pos = distanceLables.push(new ContextMenu(map, contextMenuOptions)) - 1;
bindLabelEvents(flightPath[i], distanceLables[pos]);
}
var bindLabelEvents = function(polyline, label) {
google.maps.event.addListener(polyline, 'mouseover', function(mouseEvent) {
label.show(mouseEvent.latLng);
});
google.maps.event.addListener(polyline, 'mouseout', function(mouseEvent) {
label.hide();
});
};
关于javascript - ContextMenu.js 标签显示所有菜单项的最后一个条目的标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32429290/
24
4
0
这个问题在这里已经有了答案: How to configure ContextMenu buttons for delete and disabled in SwiftUI? (4 个回答) 4 个月
我在弄清楚如何设置正确的 DataContext 时遇到了一些麻烦。在 ContextMenu . 我有一组 View 模型，它们是 ItemsControl 的来源.每个 View 模型都有一个项目
我正在寻找一个关于在 WPF 中设置 ContextMenu 和 ContextMenu Items 样式的好例子。我想要的是 ContextMenu、Menu 和 MenuItems 如何一起玩的分
我的 WPF XAML 中定义了一个上下文菜单，如下所示: 我使用 System.Windows.Forms.NotifyIcon“myIcon”作为我的托盘
我在基于 Canvas 的 WPF 中制作了一个非常漂亮的 NodeGraph，现在我正在通过右键单击菜单添加漂亮的功能。 这些菜单是上下文相关的。这意味着右键单击图表的背景将显示图表上下文菜单，而右
如何复制我在一个 ContextMenu 中创建的 MenuItem 并将其复制以便我可以在第二个 ContextMenu 中使用它？ 我试图直接复制它并删除它，但我得到元素已经有一个逻辑父元素。它必
registerForContextMenu(validate_button); @Override public void onCreateContextMenu(ContextMenu m
我正在使用 jquery contextmenu plugin这是我的 DEMO 下面是我的代码: $(function () { $.contextMenu({ sele
我正在使用 MVVM 将 View 绑定(bind)到树中的对象。我有一个实现树中项目的基类，该基类有一个 ContextMenu 属性: public IEnumerable Context
在旧 View 模型中有一个 ContextMenu 属性 ` public static ContextMenu DropDownMenu { get { return _Dr
Chrome 会触发 contextmenu 事件，但不会触发右键单击的 click 事件。 Firefox 会触发两者。 我正试图找到一些官方引用或解释，我很惊讶我从来没有遇到过这个。 http:/
默认情况下 JavaFX TextField有一个内置 ContextMenu带有“撤消”、“复制”、“剪切”等选项。 ComboBox也有同样的ContextMenu当它被设置为可编辑时( Comb
右键单击后，我一直坚持管理上下文菜单。实际上，我需要为文件夹显示一些上下文菜单项，为文件夹显示一些上下文菜单项。 单击文件夹上下文菜单将如下所示: create remove rename new 单
我正在尝试为 ScrollBars 替换 ContextMenu，我已经编写了这段代码:
我有一些 ContextMenu 和一些 menuItems。 menuItems 之一是“添加项目...”。当用户选择这个项目时，他应该看到带有可用项目列表的子菜单； 这是我的上下文菜单的描述: A
我想使用 jQuery.contextMenu: http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin 在 jQuery.
我有包含多个项目的 ListBox(SelectionMode=Extended)，我想添加上下文菜单功能。问题是如何根据某些条件动态创建上下文菜单。例如。如果只选择了一个项目，我想显示常规上下文菜单
我有一个通过数据绑定(bind)获取菜单项的上下文菜单(我使用的是 MVVM 模式): 这工作正常。但是，在没有要显示的菜单项的情况下，我根本不希望显示上下文菜单。有没有办法做到这一点？某种 XAM
我正在学习javafx.scene.control.ContextMenu，现在我面临一个问题: 如何从EventHandler获取被点击的对象？ event.source() 和 event.tar
所以我有一个复杂的上下文菜单。它不只是菜单项。它也有单选按钮，底部有一个堆栈面板，上面有一个整数上下框。
我是一名优秀的程序员,十分优秀！