웨이 포인트 - Google지도에서 특정 웨이 포인트를 제거하려면 어떻게해야합니까?

Question

Google지도의 도움으로이 앱을 만들고 있는데, 성공적으로 경로에 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을 사용하여 색인을 가져올 수 있습니다. 하여 배분하고 다음

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

과 : 그래서 dblclick에 대한 리스너 내에서, 당신은 수행하여 인덱스를 얻을 내가 예제 코드 아래에 제공

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

(자신의 API 키를 사용하십시오) 청취자가 닫혔다는 것을 알게 될 것입니다. 이것은 범위를 잃지 않고도 waypoint 변수를 전달할 수 있도록하기 위해서입니다.

또한이 jsbin link

P.S.를 확인하실 수 있습니다 마커를 제거한 것도 올바르지 않습니다. 배열의 마지막 항목 만 제거하므로 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) 
 
\t \t \t \t \t \t \t // removing them will mess up their indeces and this will no long work 
 
\t \t \t \t \t \t \t // 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>