2016-09-12 2 views
-1

У меня проблема с опциями 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, но у моего приложения много покоя, и его трудно сделать рабочий пример

+0

ok, у меня есть отрицательная точка, могу я знать почему? Если это легко для кого-то, для кого-то нет. Будьте терпимы к ppl – Arter

ответ

0

Вот мое решение.

$scope.myCartItems = []; 
      $scope.allSelectedbenches = function() { 

       if($scope.filteredCities !== undefined){ 
        $scope.myCartItems = $scope.filteredCities; 
       } 
       if($scope.filteredStates !== undefined){ 
        $scope.myCartItems = $scope.filteredStates; 

       } 
       if($scope.filteredCountries !== undefined){ 
        $scope.myCartItems = $scope.filteredCountries; 

       } 
     }; 

Проверьте, не определено ли, и покажите все для выбранного раскрывающегося списка. Проблема только в том, что при первом выпадающем списке мне нужна отдельная страна, а также государство и город. $ scope.myCartItems всегда возвращает мне все из страны ... Thnx

Смежные вопросы