如何使用Knockout.js过滤Google地图标记 [英] How to filter Google Map Markers with Knockout.js
问题描述
我试图通过输入框过滤地图标记。我想对地图标记名称属性上的标记执行全文排序。
< input data-bind =value：filter，valueUpdate：'afterkeydown'type =textclass = form-controlplaceholder =搜索>
// JS
我以为我可以将标记添加到数组并尝试清除它们，但它不起作用。这里是我的标记数组。
this.markers = ko.observableArray（[]）;
//创建热点位置数组
this.hotSpotList = ko.observableArray（[]）;
这会将我的hotSpot对象添加到热点阵列中
initialHotSpots.forEach（function（spot）{
self.hotSpotList.push（new hotSpot（spot））;
}）;
这是针对hotSpots名称属性搜索的过滤器字符串。
this.filter = ko.observable（）;
这是过滤数组的计算值。这部分工作，因为我可以使用foreach数据绑定在视图上排序我的数组的列表。
this.searchLocation = ko.computed（function（）{
var filter = this.filter（）。toLowerCase（）;
if（！filter）{
return this.hotSpotList（）;
} else {
return ko.utils.arrayFilter（this.hotSpotList（），function（item）{
return item.name（）。toLowerCase（）。indexOf（filter）！= -1;
}）;
}
}，this）;
这是创建谷歌地图。
var mapOptions = {
center：new google.maps.LatLng（39.203714，-76.861046），
zoom：13，
mapTypeId：google.maps .MapTypeId.ROADMAP
};
var map = new google.maps.Map（document.getElementById（'map'），mapOptions）;
var infoWindow = new google.maps.InfoWindow;
var marker，i;
var contentString =;
var maker
var url =;
这是我在添加新集之前尝试清除标记的第一次尝试。它只是将它们抹去，并且不再显示。
// this.clearLocations = function（）{
// for（var i = 0; i< this.markers.length; i ++）{
// makers [i] .setMap（null）
//}
/ /}
我想如果我订阅了searchLocation数组，它会删除旧的标记并创建新的那些。它工作，但只有第一次，如果文本过滤器字符串发生变化，它不会再次对标记进行排序。
this.searchLocation。 subscribe（function（）{
// Initialize marker and infowindow
console.log（'changed'）;
for（i = 0; i< self.searchLocation（）。length; i ++）{
marker = new google.maps.Marker（{
position：new google.maps.LatLng（self.searchLocation（）[i] .lat（），self.searchLocation（）[i ] .lng（）），
map：map
}）;
this.markers.push（marker）;
google.maps。 event.addListener（marker，'click'，（function（marker，i）{
return function（）{
url = self.searchLocation（）[i] .img（）;
+ self.searchLocation（）[i] .name（）+< / h1>< br>+
< p>+ self.searchLocation [i] .street（）+< br>+
self.searchLocation（）[i] .city（）+，+ self.searchLocation（）[i] .state（）+
< br>+ self.searchLocation（）[i] .phone（）+< br>< a href ='+
self.searchLocation（）[i] .website （）+'>网站< / a>< / p>< br>
+< img class ='img-responsive'src ='+ url +'> ;
infoWindow.setContent（contentString）;
infoWindow.open（map，marker）;
}
}）（marker，i））;
}
}）;
console.log（markers）;
有什么想法？
< h4> Places< / h4>
< input type =textdata-bind =textInput：filterplaceholder =Search for places ..>
< div>
< ul data-bind =foreach：visiblePlaces>
< li>
< input data-bind =text：addresstype =button>
< / li>
< / ul>
< / div>
JS：
function viewModel（）{
var self = this;
self.places = ko.observableArray（somelocations）;
this.filter = ko.observable（）;
this.visiblePlaces = ko.computed（function（）{
return this.places（）。filter（function（place）{
if（！self.filter（）|| place。 title.toLowerCase（）。indexOf（self.filter（）。toLowerCase（））！== -1）
return place;
}）;
}，this）;
I am trying to filter Map Markers via a input box. I want to do a full text sort on the markers on map markers name property.
<input data-bind="value: filter, valueUpdate: 'afterkeydown'" type="text" class="form-control" placeholder="Search">
//JS
I thought I could add the markers to an array and try and clear them but it its not working. here is my markers array.
this.markers = ko.observableArray([]);
//Create array of hotspot locations
this.hotSpotList = ko.observableArray([]);
This adds my "hotSpot" objects to the array of hotspots
initialHotSpots.forEach(function(spot){
self.hotSpotList.push(new hotSpot(spot));
});
This is the filter string that is being searched against the hotSpots name property.
this.filter = ko.observable("");
This is the computed value of the filtered array. This part works because I can sort a list of my arrays using a foreach data-bind on the view.
this.searchLocation = ko.computed(function() {
var filter = this.filter().toLowerCase();
if (!filter) {
return this.hotSpotList();
} else {
return ko.utils.arrayFilter(this.hotSpotList(), function(item){
return item.name().toLowerCase().indexOf(filter) != -1;
});
}
}, this);
This is creating the google map.
var mapOptions = {
center: new google.maps.LatLng(39.203714,-76.861046),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var infoWindow = new google.maps.InfoWindow;
var marker , i;
var contentString = "";
var makers
var url = "" ;
This is my first attempt at trying to clear the markers before I add the new set. It just wipes them out so far and they dont show up again.
// this.clearLocations = function() {
// for (var i = 0; i < this.markers.length; i++) {
// makers[i].setMap(null)
// }
// }
I thought if I just subscribed to the searchLocation arrays It would remove the old markers and create new ones. It works but only the first time then it does not sort the markers again if the text filter string changes.
this.searchLocation.subscribe(function() {
//Initialize marker and infowindow
console.log('changed');
for (i = 0; i < self.searchLocation().length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(self.searchLocation()[i].lat(), self.searchLocation()[i].lng()),
map: map
});
this.markers.push(marker);
google.maps.event.addListener(marker,'click',(function(marker, i){
return function() {
url = self.searchLocation()[i].img();
contentString = "<h1>" + self.searchLocation()[i].name() + "</h1><br>" +
"<p>" + self.searchLocation()[i].street() + "<br>" +
self.searchLocation()[i].city() + ", " + self.searchLocation()[i].state() +
"<br>" + self.searchLocation()[i].phone() + "<br><a href='" +
self.searchLocation()[i].website() +"'>website</a></p><br>"
+ "<img class='img-responsive' src='" + url + "'>";
infoWindow.setContent(contentString);
infoWindow.open(map, marker);
}
})(marker, i));
}
});
console.log(markers);
Any ideas?
Here is a relatively easy way to filter markers in a list view through search box:
HTML:
<h4>Places</h4>
<input type="text" data-bind="textInput: filter" placeholder="Search for places..">
<div>
<ul data-bind="foreach: visiblePlaces">
<li>
<input data-bind="text: address" type="button">
</li>
</ul>
</div>
JS:
function viewModel() {
var self = this;
self.places = ko.observableArray(somelocations);
this.filter = ko.observable();
this.visiblePlaces = ko.computed(function() {
return this.places().filter(function(place) {
if (!self.filter() || place.title.toLowerCase().indexOf(self.filter().toLowerCase()) !== -1)
return place;
});
}, this);
这篇关于如何使用Knockout.js过滤Google地图标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
