function MapsApi(){
var self= this;
self.marker=[];
self.map="";
self.latLangArr= ko.observableArray([{name:'Windsor Sculpture Park',isFiltered: ko.observable(true),marker:{lat: 42.314831, lng: -83.060117},contentString:'Windsor Sculpture Park'},
{name:'Ambassador Bridge',isFiltered: ko.observable(true),marker:{lat: 42.312, lng: -83.074},contentString:'Ambassador Bridge'},
{name:'Detroit River',isFiltered: ko.observable(true),marker:{lat: 42.300, lng: -83.090},contentString:'Detroit River'},
{name:'The Manchester',isFiltered: ko.observable(true),marker:{lat: 42.31480, lng: -83.03682},contentString:'The Manchester'},
{name:'Caesars Windsor',isFiltered: ko.observable(true),marker:{lat: 42.320375, lng: -83.033764},contentString:'Caesars Windsor'}]);
self.Query = ko.observable('');
self.searchResults = ko.computed(function(){
var q = self.Query();
return self.latLangArr().filter(function(i) {
var listFilter = i.name.toLowerCase().indexOf(q) >= 0;
return listFilter;
});
});
google.maps.event.addDomListener(window, 'load', self.initialize.bind(self));
}
//这有助于我过滤列表,但不会过滤谷歌地图上的相应标记。
我也希望过滤标记。 这里有一些HTML代码:
<div style="margin: 10px">
<div class="col-md-3">
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" data-bind="value: Query, valueUpdate: 'keyup'" class="form-control" placeholder="search place" aria-describedby="sizing-addon1">
</div>
<ul class="list-group" data-bind="foreach:searchResults">
<li class="list-group-item" data-bind="click:$root.getMarker.bind($root),text: name"></li>
</ul></div></div>
<div class="col-md-8"> <div id="map"></div>