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>

感谢，

斯图

来源

2015-09-06 Stuart Clarke

请提供一个[最小，完整，已测试和可读的示例]（http://stackoverflow.com/help/mcve）来说明问题。 – geocodezip

谢谢@geocodezip，我现在已将片段更改为一个工作示例。 –

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

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

来源

2015-09-08 12:36:08 duncan

完美，非常感谢。 –

ContextMenu.js标签显示所有菜单项的最后一个条目的标签

回答

相关问题