我有一个 SPA，它在地图上显示按地区、州/省和最终城市过滤的图钉。我的位置有 Lat/Lng，我将其传递给地图标记并在每个选择列表选择中对其进行过滤。我遇到了让地图关注每个区域的问题，因为它随后被过滤掉了。
有没有办法在使用标记显示标记时重新定位，或者我需要重新编写代码以处理在 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="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="bootstrap-css@*" 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="angular.js@1.4.x" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular-messages.js"></script>
<script data-require="ui-bootstrap@*" 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>