knockoutjs Google Maps API显示所有标记
使用硬编码的标记位置阵列构建Google地图页面。有一个搜索框使用敲除来过滤屏幕上的可见标记。这个想法是,当你在搜索框中输入每个字母时,敲除过滤你在屏幕上看到的标记。这一切都正常,但如果我在搜索框中输入几个字母,然后清除它,所有标记都不会重新出现在屏幕上。我知道这应该是一个简单的条件,但对于我的生活,我无法得到它的工作。 下面是相关代码:knockoutjs Google Maps API显示所有标记
var locations = [
{
title: "Location 1",
latlong: { lat: 25.55555, lng: -80.55555 },
street: "123 Main St",
city: "Anytown, USA 12345",
id: 0,
showLoc: ko.observable(true),
visible: ko.observable(true),
},
{
title: "Location 2",
latlong: { lat: 27.77777, lng: -81.11111 },
street: "456 Main St",
city: "Anytown, USA 12345",
id: 1,
showLoc: ko.observable(true),
visible: ko.observable(true),
}]
//loop to drop markers on map and add marker properties
function createMarkers() {
for (i = 0; i < locations.length; i++) {
locations[i].marker = new google.maps.Marker({
position: locations[i].latlong,
map: map,
title: locations[i].title,
animation: google.maps.Animation.DROP,
id: i
});
}
}
//sets marker visibility
function setMarkerVisibility() {
for (i = 0; i < locations.length; i++) {
locations[i].marker.setVisible(locations[i].visible);
}
}
//knockout viewmodel - handles search locations array and filtering
function AppViewModel() {
query = ko.observable('');
this.locations = ko.computed(function() {
var self = this;
var search = self.query().toLowerCase();
return ko.utils.arrayFilter(locations, function (loc) {
//I've tried adding an || query('') here, or an else if, but no luck
if (loc.title.toLowerCase().indexOf(search) >= 0 || (query(''))) {
loc.showLoc(true);
loc.visible = true;
} else {
loc.showLoc(false);
loc.visible = false;
setMarkerVisibility();
}
});
});
}
所以这里的答案是:ko.computed功能之前 createMarkers()在脚本执行,所以我需要添加一个IF通过数组循环,并验证了该该标志已经创建
function AppViewModel() {
query = ko.observable('');
this.locations = ko.computed(function() {
var self = this;
var search = self.query().toLowerCase();
if (!search) {
for (i = 0; i < locations.length; i++) {
if (locations[i].marker) //checks to see that markers exist
locations[i].marker.setVisible(true);
}
}
return ko.utils.arrayFilter(locations, function (loc) {
if (loc.title.toLowerCase().indexOf(search) >= 0 || search == '') {
loc.showLoc(true);
loc.visible = true;
} else {
loc.showLoc(false);
loc.visible = false;
}
setMarkerVisibility();
});
});
}
我不知道,但它看起来像有可能是一个问题,你如果在该(查询(“”))声明语句将永远是假的。你将变量“query”设置为一个空的可观察对象,然后使用将值放入可观察对象的语法,据我所知。我猜你想要显示所有标记,如果你的搜索输入是空的。我想你会想要使用你当前的变量来测量输入是否为空以显示全部。 if语句的第一部分也缺少setMarkerVisibility()调用。
//knockout viewmodel - handles search locations array and filtering
function AppViewModel() {
query = ko.observable('');
this.locations = ko.computed(function() {
var self = this;
var search = self.query().toLowerCase();
return ko.utils.arrayFilter(locations, function (loc) {
//Show all location markers if they contain the search text or if the search text is empty
if (loc.title.toLowerCase().indexOf(search) >= 0 || search == '') {
loc.showLoc(true);
loc.visible = true;
} else {
loc.showLoc(false);
loc.visible = false;
}
setMarkerVisibility();
});
});
}
无法从IF(未定义)中调用setMarkerVisibility()...仅从ELSE – Electrobank
尝试在if语句后调用它然后 – MUlferts
任何处理google maps标记的函数只能从else语句中调用,否则它抛出错误,因为标记未定义。我猜这是因为他们还没有创建? – Electrobank
我在我的答案中提出了有关查询变量的部分,但现在我看到了setMarkerVisibility()调用,我认为这可能是主要问题。 – MUlferts