У меня проблема с опциями GET ALL
. Вот поток.
Получить все выбранные маркеры на картах Google
Во-первых, когда пользователь открывает приложение и хочет выбрать место, у него есть angular-google-maps
, причем все места выбраны с помощью маркеров. Кроме того, у пользователя есть выбор из выпадающего списка (сначала нужно выбрать страну, и я показываю на картах все маркеры в этой стране, то в зависимости от выбранной страны я показываю следующий выпадающий список со странами в выбранной стране и показываю маркеры только для этого состояния, а также для города .)
Все маркеры имеют информационное окно, где я нажимаю кнопку ADD TO CHART
. Когда вы нажимаете на ADD TO CHART
, я показываю информацию с идентификатором маркера в списке таблиц.
Теперь, у меня есть кнопка, чтобы получить все и показать все идентификаторы в списке. Но, все зависит от выбранного выпадающего списка, например, если только выберите «Страна» и нажмите «Получить все», я получу список всех маркеров в стране, если вы выберите состояние и нажмите «Получить все», дайте мне все маркеры в этом состоянии.
Вот код»
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow();
var createMarker = function (info) {
$scope.selectedbenches = info;
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.lng),
optimized: false,
title: info.city,
icon: 'assets/img/marker.png'
});
$scope.allSelectedbenches = function() {
console.log($scope.selectedbenches);
};
$scope.myCartItems = [];
$scope.addToCart = function (item)
{
$http.get(serviceBase + 'control/board/' + item)
.success(function (item)
{
$scope.myCartItems.push(item);
});
$scope.input = '';
localStorage.setItem('todos', JSON.stringify($scope.myCartItems));
};
$scope.remove = function (index) {
$scope.myCartItems.splice(index, 1);
};
google.maps.event.addListener(marker, 'click', (function (marker, $scope) {
return function() {
var compiled = $compile(marker.content)($scope);
$scope.$apply();
infoWindow.setContent(compiled[0]);
infoWindow.open($scope.map, marker);
};
})(marker, $scope)
);
$scope.markers.push(marker);
marker.content = '<div class="iw-container" style="color: #000;">'
+
'<div class="iw-content">'
+
'<b>'
+
'Serial number: '
+
'</b>'
+
info.serial_n
+
'</div>'
+
'<div class="iw-content">'
+ '<b>'
+
'Description: '
+
'</b>'
+
info.desc
+
'<b>'
+
'</div>'
+
'<div class="iw-content">'
+
'Last report: '
+
'</b>'
+
info.last_report
+
'<b>'
+
'</div>'
+
'<div class="iw-content">'
+
'Created: '
+
'</b>'
+
info.created_at
+
'</div>' + '<input type="button" value="Add bench" ng-model="input" ng-click="addToCart(' + info.id + ')"/>'
+
'<div class="iw-content">'
+
'<img border="0" float="left" src="https://pbs.twimg.com/profile_images/691936998156804096/iveb6l4U.png">'
+
'<img border="0" float="right" src="http://www.fibrexgroup.com/images/Products/SSB001-main.jpg">'
+
'</div>'
+
'</div>'
+
'<div class="iw-title" style="color: #000;">' + '<h2>' + info.city_name + '</h2>' + '</div>' + marker.content;
}
for (i = 0; i < lokacije.length; i++) {
createMarker(lokacije[i]);
}
$scope.openInfoWindow = function (e, selectedMarker) {
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
$scope.clearMarkers = function() {
for (var i = 0; i < $scope.markers.length; i++) {
$scope.markers[i].setMap(null);
}
$scope.markers.length = 0;
}
//Country filter
$scope.filterMarkersCountry = function() {
//1.select filtered country
var filteredCountries;
var selectedCountry = $scope.country;
if (selectedCountry == '0') {
filteredCountries = lokacije;
} else {
filteredCountries = lokacije.filter(function (c) {
if (c.country_id == selectedCountry.id)
return c;
});
}
//2.update markers on map
$scope.clearMarkers();
if (filteredCountries.length > 0) {
for (i = 0; i < filteredCountries.length; i++) {
createMarker(filteredCountries[i]);
}
}
};
//State filter
$scope.filterMarkersState = function() {
//1.select filtered cities
var filteredStates;
var selectedStates = $scope.state;
if (selectedStates == '0') {
filteredStates = lokacije;
} else {
filteredStates = lokacije.filter(function (c) {
if (c.state_id == selectedStates.id)
return c;
});
}
//2.update markers on map
$scope.clearMarkers();
if (filteredStates.length > 0) {
for (i = 0; i < filteredStates.length; i++) {
createMarker(filteredStates[i]);
}
}
};
//City filter
$scope.filterMarkersCity = function() {
//1.select filtered cities
var filteredCities;
var selectedCities = $scope.city;
if (selectedCities == '0') {
filteredCities = lokacije;
} else {
filteredCities = lokacije.filter(function (c) {
if (c.city_id == selectedCities.id)
return c;
});
}
//2.update markers on map
$scope.clearMarkers();
if (filteredCities.length > 0) {
for (i = 0; i < filteredCities.length; i++) {
createMarker(filteredCities[i]);
}
}
};
});
Это все работает отлично, как я ожидал. Только проблема с получить все кнопки. Вот HTML
<div class="narudzbe_lokacija">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<h5>Odabir lokacije</h5>
<div>
<label class="control-label col-lg-12 col-md-12 col-sm-12 col-xs-12">Country: </label>
<select id="country" class="form-control" ng-model="country" ng-options="country as country.name for country in countries track by country.id" ng-change="getState(); filterMarkersCountry()">
<option value='country_id'>{{country.name}}</option>
</select>
</div>
<div>
<label class="control-label col-lg-12 col-md-12 col-sm-12 col-xs-12">States</label>
<select id="state" class="form-control" ng-disabled="!country" ng-model="state" ng-options="state as state.name for state in states track by state.id" ng-change="getCity(); filterMarkersState()">
<option value='state_id'>{{state.name}}</option>
</select>
</div>
<div>
<label class="control-label col-lg-12 col-md-12 col-sm-12 col-xs-12">City</label>
<select id="city" class="form-control" ng-disabled="!state" ng-model="city" ng-options="city as city.name for city in cities track by city.id" ng-change="filterMarkersCity()">
<option value='city_id'>{{city.name}}</option></select>
</div>
<button ng-click="allSelectedbenches()">Get all</button>
<br />
<br />
</div>
Я пытаюсь сделать plunker, но у моего приложения много покоя, и его трудно сделать рабочий пример
ok, у меня есть отрицательная точка, могу я знать почему? Если это легко для кого-то, для кого-то нет. Будьте терпимы к ppl – Arter