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

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

本文关键字：标签 最后一个 显示 js 菜单项      更新时间：2023-09-26

我正在使用ContextMenu的其他东西，然后它的预期目的，但这个想法似乎很好，标记在谷歌地图上点之间的距离折线。

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

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

这是我想要达到的目标的精简版本。

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>

谢谢,

Stu

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

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();
    });
};
相关文章：