Knockout.js与谷歌地图API,过滤标记

时间:2016-07-03 17:43:56

标签: google-maps knockout.js

   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>

0 个答案:

没有答案