Question

我正在使用Google Maps API制作动态地图，该地图API使用标记来标记预定义位置列表，例如：

 self.locations = [{
        name: 'Foxtrot',
        lat: 38.713905,
        lng: -9.1518868,
        type: 'Bar'
     }

它还有一个搜索字段，允许您按位置名称（filteredNav）进行过滤。它也应该过滤标记，但......这就是问题。

我的建议如下：

尝试编写console.log（self.location_array（））;因为位置和标记数据模态是分开的，你必须循环 self.location_array（）来处理和查找要显示哪一个，哪一个通过在标记对象上调用setVisible（或setMap）来隐藏。

这是我的代码：

// Create observable array
self.nav = ko.observableArray(self.locations);
// Create empty observable string
self.filter = ko.observable(''); 
// Show nav and filter
self.filteredNav = ko.computed(function() {

    var filter = self.filter().toLowerCase();

    if (!filter) {
        return self.nav();
    }
    return self.nav().filter(function(i) {
        // Check for proper casing or lowercase
        return i.name.toLowerCase().indexOf(filter) > -1 || i.name.indexOf(filter) > -1;
    });

    //THIS IS THE PROBLEM!
    for (var i = 0; i < location_array()[i].length; i++) {
    //??????
        location_array()[i].setVisible(true);
    }//?????

 }

注意：可观察数组实现：vm.location_array()[i]

Link to the project

所以...问题是......我怎么能做循环？我不知道怎么做......

Answer 1

首先，您提供的代码有一些“神秘”部分。例如，什么是self，什么是ko，什么是observableArray等等。人们只能猜出这些是什么。

因此，我将简单地向您描述如何实现您想要的一般逻辑。

逻辑很简单。

与过滤侧边栏中的地点的方式相同，当您键入内容时，您应过滤标记数组，使用setVisible或true

来调用false

这意味着，在创建标记时，应将它们存储到单独的数组中。

此外，当您创建标记时，例如

var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(latitude, longitude)
})

添加name属性或类似内容，如此

var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(latitude, longitude),
    name: 'Foxtrot`
})

以便您创建的marker具有name属性，您可以使用该属性过滤标记数组。

因此，为了过滤您的标记数组，您应该简单地遍历数组并检查每个.name对象的marker属性，如果名称与搜索输入不匹配，则只需标记上为setVisible(false)，否则请setVisible(true)

希望这有帮助。

GoogleMapsAPI - 创建标记过滤器

1 个答案: