航点 - 如何从谷歌地图中删除特定航点？

Question

我在谷歌地图的帮助下制作了这个应用程序，我成功地在一条路线中添加了waypoints 并在它们之间建立了一条路线。但是在dbclick 上，我从地图上删除了那个路点。现在，当我制作路线时，它也包含已删除的waypoint。因为它不会从waypoint 数组中删除。

问题是如何从航点数组中删除特定的waypoint。我没有任何index 的东西。

推送航路点

/* Whenever a user taps a pin it goes into pinwapypts */
        pinwaypts.push({
          location: $scope.destination_route,
          stopover: true,

        });

在地图中添加航点

 infowindow.open($scope.map, marker);
        $scope.markers.push(marker);
        google.maps.event.addListener(marker, 'click', function () {
          infowindow.setContent($scope.results[0].formatted_address);
          infowindow.open($scope.map, this);
        });

从地图上移除航点标记

google.maps.event.addListener(marker, 'dblclick', function () {
          $scope.markers.pop().setMap(null);

        });

现在我如何从其数组中删除特定的waypoint？

完整代码

  function getClickLoc(latlng) {
  var geocoder = new google.maps.Geocoder;
  geocoder.geocode({
    'location': latlng
  }, function (results, status) {
    $scope.results = results;
    //console.log(results);
    if (status === 'OK') {
      if (results[0]) {
        $scope.map.setZoom(12);
        var marker = new google.maps.Marker({
          position: latlng,
          map: $scope.map
        });


        infowindow.setContent(results[0].formatted_address);

        $scope.destination_route = latlng;

        /* Whenever a user taps a pin it goes into pinwapypts */
        pinwaypts.push({
          location: latlng,
          stopover: true

        });

        $scope.$apply();

        infowindow.open($scope.map, marker);
        $scope.markers.push(marker);

        google.maps.event.addListener(marker, 'dblclick', function () {
          infowindow.setContent($scope.results[0].formatted_address);
          infowindow.open($scope.map, this);
        });

        google.maps.event.addListener(marker, 'dblclick', function () {
          $scope.markers.pop().setMap(null);
        });

        //$ionicLoading.hide();
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Something went wrong, Please try again.');
      //window.alert('Geocoder failed due to: ' + status);
    }
  });
}

Answer 1

您的完整代码缺少很多东西，因此我尽最大努力从中创建了一个最小、完整且可验证的示例。这假设您每次创建标记时都会创建一个航路点。并且标记是通过在地图上的点击/点击创建的。

从数组中删除航点时，您可以使用indexOf 获取其索引。因此，在dblclick 的侦听器中，您可以通过以下方式获取索引：

var wayptIndex = $scope.pinwaypts.indexOf(waypoint);

然后拼接：

$scope.pinwaypts.splice(wayptIndex, 1);

我提供了下面的示例代码（请务必使用您自己的 API KEY），您会注意到侦听器处于闭包中。这样我仍然可以将 waypoint 变量传递给它，而不会失去作用域。

您也可以查看jsbin link

附： 您删除标记也是不正确的。不要执行pop()，因为这只会删除数组中的最后一项。如果你双击一个中间数组，它仍然会删除最后一项。我还使用indexOf 来获取标记的正确索引。

希望这对您有所帮助，并希望您下次可以创建最小且完整的示例！ :)

(function(angular) {
  'use strict';

  angular
    .module('ngApp', [])
    .controller('demoController', demoController);

  function demoController($scope) {
    initMap();
    $scope.pinwaypts = [];
    $scope.markers = [];

    function initMap() {
      $scope.map = new google.maps.Map(document.getElementById('map'), {
        center: {
          lat: -34.397,
          lng: 150.644
        },
        zoom: 8
      });


      $scope.map.addListener('click', getClickLoc);
    }


    function getClickLoc(e) {
      var latlng = e.latLng;
      var geocoder = new google.maps.Geocoder();
      geocoder.geocode({
        'location': latlng
      }, function(results, status) {
        $scope.results = results;
        if (status === 'OK') {
          if (results[0]) {
            var marker = new google.maps.Marker({
              position: latlng,
              map: $scope.map
            });
            $scope.map.panTo(latlng);
            $scope.map.setZoom(12);

            // you did not show how you instantiated your infowindow so I added this
            var infowindow = new google.maps.InfoWindow();
            infowindow.setContent(results[0].formatted_address);
            $scope.markers.push(marker);
            $scope.destination_route = latlng;

            /* Whenever a user taps a pin it goes into pinwapypts */
            var waypoint = {
              location: latlng,
              stopover: true
            };
            $scope.pinwaypts.push(waypoint);

            // I'm not sure if you still really need this.
            $scope.$apply();

            infowindow.open($scope.map, marker);

            google.maps.event.addListener(marker, 'click', function() {
              // This is redundant. You can just open the infowindow on click of the marker                   // infowindow.setContent($scope.results[0].formatted_address);
              infowindow.open($scope.map, this);
            });

            (function(waypoint, marker) {
              google.maps.event.addListener(marker, 'dblclick', function() {
              // Pop has an issue. You will only remove the last marker from your array, 
              // not the specific marker the user is double-clicking. 
              // $scope.markers.pop().setMap(null);
                var markerIndex = $scope.markers.indexOf(marker);
              // You don't remove the markers from the array. Just set them to setMap(null)
							// removing them will mess up their indeces and this will no long work
							// just refresh the markers array on a new request or something
                $scope.markers[markerIndex].setMap(null);
              // Get the index of the waypoint and this once you remove so that 
              // it's not included when you do a directions service request
                var wayptIndex = $scope.pinwaypts.indexOf(waypoint);
                $scope.pinwaypts.splice(wayptIndex, 1);
              });
            }(waypoint, marker))

          } else {
            window.alert('No results found');
          }
        } else {
          window.alert('Something went wrong, Please try again.');
        }
      });
    }
  }
})(window.angular);

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body,
#view {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <!-- BE SURE TO USE YOUR OWN API KEY. This loads the script synchronously and I call initMap manually inside my controller. For demo purposes only. -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZVylT7o5OxdosVfh-IVONHoaA0cpN5VI"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
</head>

<body ng-app="ngApp">
  <div id="view" ng-controller="demoController">
    <div id="map"></div>
  </div>

</body>

</html>