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

Question

我将 ContextMenu 用于其预期目的之外的其他用途，但这个想法似乎不错，用 google 地图上的点之间的距离标记多段线。

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

我正在创建一组多段线，以便每条多段线都可以显示点之间的距离，除了距离标签外，一切似乎都很好。

这是我要实现的目标的简化版本。

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>

谢谢，

斯图

Answer 1

问题是您正在定义要在循环内的鼠标事件上显示的标签。现在它看起来有点像这样：

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

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

ContextMenu.js label showing label of last entry for all menu items

javascript

contextmenu

google-maps-api-3