JavaScript数组对象需要删除元素。

Question

谷歌地图directionsService.route需要使用JavaScript添加或删除waypoint。

可以使用以下代码将新点添加到数组中：

waypts.push({ location: "Rome, Italy", stopover: true });

从数组中删除航点时出现问题

这是一个数据示例，可以更详细地解释；

需要从上述JavaScript对象数组中删除点1或点2，如何实现。

然后，我将为每次从上述数组中绘制路径创建新的路标，命名为nwaypts。

var nwaypts = [
{ location: "Rome, Italy", stopover: true }, // xyz: start point 
{ location:  { lat: 42.2070007, lng: 12.48549939999998 }, stopover: true, id: "17167" }, // point 1
{ location: { lat: 42.3793831, lng: 12.82857039999999 }, stopover: true, id: "18823" }, // point 2
{ location: "Terni, Italy", stopover: true } // xyz: end point 
];

- bharat

Answer 1

你的代码存在一些问题。

可工作示例请参考https://jsfiddle.net/z1dvs5wp/

代码解释如下：

<script>

  // set variables outside initMap() function to make them visible for other functions
  var waypts = [];
  var directionsService;
  var directionsDisplay;
  var map;

  // add waypoints 
  waypts.push({
        location: "winnipeg, mb",
        stopover: true
      });
  waypts.push({
        location: "spokane, wa",
        stopover: true
      });    

  function initMap() {
    // map setup
    directionsService = new google.maps.DirectionsService;
    directionsDisplay = new google.maps.DirectionsRenderer;
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: {lat: 41.85, lng: -87.65}
    });
    directionsDisplay.setMap(map);

    // calculate route
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  }

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    directionsService.route({
      origin:"Boston, MA",//document.getElementById('start').value,
      destination: "San Francisco, CA",//document.getElementById('end').value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
        var route = response.routes[0];
        var summaryPanel = document.getElementById('directions-panel');
        summaryPanel.innerHTML = '';
        // For each route, display summary information.
        for (var i = 0; i < route.legs.length; i++) {
          var routeSegment = i + 1;
          summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
              '</b><br>';
          summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
          summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
          summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
        }
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }

 function removewaypoint(idx=0) {
  // this function takes index of location to remove
  // point A is start
  // point B has index 0
  // point C has index 1... 
  // removewaypoint(1) - will remove point C

  waypts.splice(idx, 1);

  // recalculate route with new waypoints
  calculateAndDisplayRoute(directionsService, directionsDisplay);
 }
</script>

- mx0

Answer 2

你可以在删除航点时为标记添加 id，然后在 removecode 中尝试与要删除的标记 id 进行比较。请提供完整代码以获得确切的解决方案。

var nwaypts=[];
                        var j=0;
                        for ( var i = 0; i < waypts.length ; i++) {
                            if(waypts[i].id!=removemarkerid){
                                nwaypts[j]=waypts[i];
                                j++;
                            }
                        }
                        waypts=nwaypts; 

- Savan Mas