Javascript ContextMenu.js标签，显示所有菜单项的最后一项标签

我使用ContextMenu的目的与它的预期目的不同，但这个想法似乎很好，在google地图上用点之间的距离标记一条多段线

我希望每次将鼠标悬停在显示该腿的距离的多段线上时都显示标签。我确定距离没有问题，但是，标签总是显示最后一个条目的距离，而不是为该腿确定的距离

我正在创建一个多段线数组，这样每个多段线都可以显示点之间的距离，除了距离标签之外，所有这些看起来都很好

这是我试图实现的目标的简化版本

var flightPath=[]；
var距离=[]；
var映射；
函数initMap（）{
//谷歌地图
map=new google.maps.map（document.getElementById（'map'）{
缩放：3，
中心：{
纬度：0，
液化天然气：-180
},
mapTypeId:google.maps.mapTypeId.TERRAIN
});
//多段线的航路点
var FlightPlan坐标=[{
拉脱维亚：37.772，
液化天然气：-122.214
}, {
纬度：21.291，
液化天然气：-157.821
}, {
lat:-18.142，
液化天然气：178.431
}, {
lat:-27.467，
液化天然气：153.027
}];
//单独绘制多段线的每条支腿，以便可以为每条支腿自定义鼠标悬停/鼠标退出事件
对于（i=0；i

html，
身体{
身高：100%；
保证金：0；
填充：0；
}
#地图{
身高：100%；
}
.上下文菜单{
背景色：#ffff90；
边框：1px纯色灰色；
}
.上下文菜单项{
填充：3px6px；
背景色：#ffff90；
}
.上下文菜单项：悬停{
背景色：#4b545f；
颜色：#fff；
}
.context\u菜单\u分隔符{
背景颜色：灰色；
高度：1px；
保证金：0；
填充：0；
}

问题

问题在于，您正在定义标签以在循环中的鼠标事件上显示。现在看起来有点像这样：

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);
    });
}

在循环结束时，pos=数组的长度-1，因此当您在任何flightpath部分上执行鼠标操作时，该行始终执行：

    distanceLables[pos].show(mouseEvent.latLng);

i、 e.它将永远是：

    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();
    });
};

for（i=0；i

请提供一个演示该问题的示例。谢谢@geocodezip，我现在已将该片段更改为一个工作示例。

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();
    });
};