ContextMenu.js标签显示所有菜单项的最后一个条目的标签
问题描述：
我使用ContextMenu作为其他目的的东西，但这个想法似乎很好，用谷歌地图上的点之间的距离来标记多段线。ContextMenu.js标签显示所有菜单项的最后一个条目的标签
我希望标签在每次将鼠标悬停在显示该腿的距离的折线上时显示。我确定距离没有问题，但是，标签总是显示最后一次输入的距离，而不是确定该距离的距离。
我创建了一个多段线的数组，以便每个人都可以显示点之间的距离，它似乎工作得很好，除了距离标签。
这是我试图实现的减少版本。
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);
});
}
直到mouseover事件发生之前，匿名函数中的行才会被执行。那么，你真的做的是这样的：
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();
});
};
+1
完美，非常感谢。 –
请提供一个[最小，完整，已测试和可读的示例]（http://stackoverflow.com/help/mcve）来说明问题。 – geocodezip
谢谢@geocodezip，我现在已将片段更改为一个工作示例。 –