我在谷歌地图的帮助下制作这个应用程序,我在路线中成功添加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);
}
});
}
答案 0 :(得分:0)
您的完整代码有很多缺失的东西,所以我尽最大努力创建一个最小的,完整的,可验证的示例。这假定您每次创建标记时都创建一个航点。通过点击/点击地图创建标记。
从数组中删除航点时,您可以使用indexOf
获取其索引。因此,在dblclick
的监听器中,您可以通过执行以下操作获取索引:
var wayptIndex = $scope.pinwaypts.indexOf(waypoint);
然后拼接:
$scope.pinwaypts.splice(wayptIndex, 1);
我在下面提供了示例代码(请务必使用您自己的API KEY),并且您会注意到侦听器处于闭包状态。这样我仍然可以将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)
// 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>
&#13;