ウェイポイント - 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を使用してインデックスを取得できます。私は（自分のAPIキーを使用してください）以下のサンプルコードを提供

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

：

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

をしてからで、それを継ぐ：だからdblclickのためのあなたのリスナーの内側に、あなたが実行してインデックスを取得しますリスナーが閉鎖されていることに気づくでしょう。これは、範囲を失うことなく、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>