2015-11-07 55 views
0

我有一個SPA在地圖上顯示針腳,按地區,州/省和城市最終篩選。我在我的位置有Lat/Lng,我將它傳遞給地圖標記並在每個選擇列表選擇上過濾它。我遇到了讓地圖專注於每個地區的問題,因爲它隨後被濾除。AngularJS/NgMap - 縮放到選定的針腳和中心

當使用標記來顯示標記時,有沒有一種方法可以重新調用標籤,或者這樣做需要重做代碼來處理在JS中顯示標記而不是標記?

見Plunkr:http://plnkr.co/edit/qaLFYD?p=preview

var app = angular.module('plunker', ['ngRoute', 'angular.filter', 'ngMap']); 
 

 
app.controller('MainCtrl', function($scope, $anchorScroll, $location, $http) { 
 

 

 
    // GET data 
 
    $scope.dataObject = data.List; 
 
    $scope.locationObject = data.Locations; 
 

 

 

 
    $scope.cart = []; 
 

 
    $scope.addToCart = function(index) { 
 
    $scope.cart.push(index); 
 
    $scope.cartCount = $scope.cart.length; 
 
    } 
 

 
    $scope.activeRow = function(index) { 
 
    $scope.selectedRow = index; 
 
    $location.hash(); 
 
    $anchorScroll('anchor-' + index); 
 
    } 
 

 
    $scope.gotoAnchor = function(x) { 
 
    var newHash = 'anchor' + x; 
 
    } 
 

 
    $scope.$on('mapInitialized', function(event, map) { 
 
    map.setOptions({ 
 
     draggable: true 
 
    }); 
 
    }); 
 

 

 

 

 

 
}).filter('byFilter', function() { 
 
    return function(items, location) { 
 
    var filtered = []; 
 

 
    if (!location || !items.length) { 
 
     return items; 
 
    } 
 

 
    items.forEach(function(itemElement, itemIndex) { 
 
     itemElement.Locations.forEach(function(locationElement, locationIndex) { 
 
     if (filterCountry(locationElement, location) || filterRegion(locationElement, location) || filterCity(locationElement, location)) 
 
      filtered.push(itemElement); 
 
     }); 
 
    }); 
 

 
    return filtered; 
 
    }; 
 

 
    function filterCountry(locationElement, location) { 
 
    var exist = false; 
 
    if (!location.Region) { 
 
     exist = true; 
 
     return exist; 
 
    } else exist = (locationElement.Region === location.Region); 
 
    return exist; 
 
    } 
 

 
    function filterRegion(locationElement, location) { 
 
    var exist = false; 
 
    if (!location.StateName) { 
 
     exist = true; 
 
     return exist; 
 
    } 
 
    locationElement.Sites.forEach(function(siteElement, siteIndex) { 
 
     if (siteElement.State === location.StateName) { 
 
     exist = true; 
 
     return false; 
 
     } 
 
    }); 
 
    return exist; 
 
    } 
 

 
    function filterCity(locationElement, location) { 
 
    var exist = false; 
 
    if (!location.CityName) { 
 
     exist = true; 
 
     return exist; 
 
    } 
 

 
    locationElement.Sites.forEach(function(siteElement, siteIndex) { 
 
     if (siteElement.City === location.CityName) { 
 
     exist = true; 
 
     return false; 
 
     } 
 
    }); 
 
    return exist; 
 
    } 
 
}).filter('ForMap', function() { 
 
    return function(items, location) { 
 
    var filtered = []; 
 

 
    if (!items) { 
 
     return items; 
 
    } 
 

 
    var state = (location.state ? location.state.StateName : ''); 
 
    var city = (location.city ? location.city.CityName : ''); 
 
    var region = (location.region ? location.region.Region : ''); 
 

 
    items.forEach(function(itemElement, itemIndex) { 
 
     itemElement.Locations.forEach(function(locationElement, locationIndex) { 
 
     if (locationElement.Region === region || !region) { 
 
      locationElement.Sites.forEach(function(siteElement, siteIndex) { 
 
      if ((siteElement.State == state && !city) || siteElement.City == city || (!state && !city)) { 
 
       filtered.push(siteElement); 
 
       return false; 
 
      } 
 
      }); 
 
     } 
 
     }); 
 
    }); 
 
    return filtered; 
 
    }; 
 
});
/* Put your css in here */ 
 

 
body { 
 
    background: #eee; 
 
} 
 
div.cart { 
 
    display: block; 
 
    height: 70px; 
 
    background: silver; 
 
    margin-left: 20px; 
 
    width: 200px; 
 
    padding: 5px 10px; 
 
    margin-bottom: 20px; 
 
    margin-top: 20px; 
 
} 
 
.cart h1 { 
 
    color: #fff; 
 
    line-height: 20px; 
 
} 
 
.item-list-wrapper { 
 
    height: 400px; 
 
    width: 90%; 
 
    border: 1px solid #ddd; 
 
    overflow-y: scroll; 
 
    margin-left: 20px; 
 
} 
 
.item-list-wrapper table td { 
 
    padding: 10px; 
 
    vertical-align: middle; 
 
    margin-bottom: 10px; 
 
    font-size: 12px; 
 
} 
 
.item-list { 
 
    height: auto; 
 
    width: 100%; 
 
    margin-bottom: 10px; 
 
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); 
 
    border: 1px solid #fff; 
 
    background: #efefe4; 
 
} 
 
.col-num { 
 
    width: 100px; 
 
} 
 
.col-compound { 
 
    width: 80px; 
 
} 
 
.filters { 
 
    width: 100%; 
 
    clear: both; 
 
    margin-left: 20px; 
 
} 
 
.filters select { 
 
    width: 200px; 
 
} 
 
.filters column { 
 
    height: 100px; 
 
    width: 200px; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.filters select { 
 
    display: inline-block; 
 
} 
 
.region { 
 
    font-weight: bolder; 
 
} 
 
.state { 
 
    font-weight: normal; 
 
} 
 
.map-wrapper { 
 
    width: 490px; 
 
    height: 490px; 
 
} 
 
map { 
 
    width: 490px; 
 
    height: 490px; 
 
}
<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <link data-require="[email protected]*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
    <link data-require="[email protected]*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="angular-ui.min.css" /> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular-messages.js"></script> 
 
    <script data-require="[email protected]*" data-semver="0.13.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.1/ui-bootstrap.min.js"></script> 
 
    <script src="angular-filter.min.js"></script> 
 
    <script src="angular-route.min.js"></script> 
 
    <script src="ng-map.min.js"></script> 
 
    <script src="angular-ui.min.js"></script> 
 
    <script src="angular-scroll.min.js"></script> 
 
    <script src="app.js"></script> 
 
    <script src="http://zbl.me/test/103015.js"></script> 
 

 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <div ng-view=""></div> 
 
    <div class="filters"> 
 
    <h2>Filter results</h2> 
 
    <column> 
 
     <select name="selectRegion" class="form-control" ng-model="selectRegion" ng-options="location as location.Region for location in locationObject | orderBy: location.Region:reverse"> 
 
     <option value="">Select Region</option> 
 
     </select> 
 

 
     <select name="selectState" class="form-control" ng-disabled="!selectRegion" ng-model="selectState" ng-options="state as state.StateName for state in selectRegion.States"> 
 
     <option value="">Select State/Province/Country</option> 
 
     </select> 
 

 
     <select name="selectCity" class="form-control" ng-disabled="!selectState" ng-model="selectCity" ng-options="city as city.CityName for city in selectState.Cities"> 
 
     <option value="">Select City</option> 
 
     </select> 
 
    </column> 
 
    <column> 
 
     <select name="selectPhase" class="form-control" ng-model="selectPhase" ng-options="data.Phase as data.Phase for data in dataObject | unique: 'Phase' | orderBy: 'Phase' "> 
 
     <option value="">Select Phase</option> 
 
     </select> 
 
     <select name="selectNumber" class="form-control" ng-model="selectNumber" ng-options="data.Number as data.Number for data in dataObject | unique: 'Compound' | orderBy: 'Compound' "> 
 
     <option value="">Select Number</option> 
 
     </select> 
 
    </column> 
 
    </div> 
 

 
    <div map-lazy-load="http://maps.google.com/maps/api/js"> 
 
    <map zoom="1" scrollwheel="false"> 
 
     <span ng-repeat="site in (dataObject | ForMap : {region:selectRegion, state:selectState, city:selectCity}) track by $index" id="{{data.Id}}"> 
 
    <marker position="[{{site.Latitude}},{{site.Longitude}}]"></marker> 
 
</span> 
 
    </map> 
 
    </div> 
 

 

 
    <div class="cart"> 
 
    <h1>Cart: {{cartCount}}</h1> 
 
    </div> 
 
    <div class="item-list-wrapper"> 
 
    <table class="table table-condensed table-hover"> 
 
     <tr ng-repeat="data in dataObject | byFilter | filterBy:['Phase']: selectPhase | filterBy:['Number']: selectNumber track by $index" ng-click="activeRow($index)"> 
 
     <td class="column">{{data.Phase}}</td> 
 
     <td class="column col-num">{{data.Number}}</td> 
 
     <td class="column col-compound">{{data.Compound}}</td> 
 
     <td> 
 
      <span ng-repeat="location in data.Locations track by $index" class="region">{{ location.Region}}: 
 
           <span ng-repeat="site in location.Sites | unique: 'State'" class="state">{{site.State}} 
 
           </span> 
 
      </span> 
 
     </td> 
 
     <td><a href="" ng-click="addToCart()">Add</a> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 

 
</body> 
 

 
</html>

回答

1

看起來像添加放大到包括標記物= 「真」,以在地圖元件實現這一點。

  \t <div map-lazy-load="http://maps.google.com/maps/api/js"> 
 
\t \t   <map zoom="1" scrollwheel="false" zoom-to-include-markers="auto"> 
 
    <span ng-repeat="site in (dataObject | ForMap : {region:selectRegion, state:selectState, city:selectCity}) track by $index" id="{{data.Id}}"> 
 
    <marker position="[{{site.Latitude}},{{site.Longitude}}]"></marker> 
 
</span> 
 
     \t \t </map> 
 
    </div>