Google Maps API - 创建标记过滤器答案

【问题标题】：GoogleMapsAPI - create markers filterGoogle Maps API - 创建标记过滤器
【发布时间】：2017-03-18 23:06:19
【问题描述】：

我正在使用 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

所以...问题是...我该如何进行循环？我不知道该怎么做....

【问题讨论】：

标签： javascript arrays google-maps google-maps-api-3 google-maps-markers

【解决方案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 属性，您可以使用它来过滤您的标记数组。

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

希望这会有所帮助。

【讨论】：