javascript - 使用 ko.compulated 和 kendoMap 绑定(bind)动态添加标记到 kendoMap

Question

我正在编写有效的办公室定位器。作为其中的一部分，我想在初始位置的一定半径内添加标记，并将图钉放在剑道 map 控件上。

jsfiddle 在这里 http://jsfiddle.net/3whk8mm2/

我有下面的函数，它使用半正矢距离计算来过滤 officeLocations 数组。

self.filteredOffices = ko.computed(function() {
        if(self.searchRadius() > 0)
        {
            var result =  ko.utils.arrayFilter(self.officeLocations(), self.filter);
            return result;
        }
    });

map 本身是使用以下选项创建的:-

   self.mapOptions = {
        center: [53.4809500, -2.2374300],
        zoom: 5,
        layers: [
            {
                type: "tile",
                urlTemplate: "http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
                subdomains: ["a", "b", "c"],
                attribution: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>"
            }, {
                type: "marker",
                dataSource: self.filteredOffices, //works if put self.officeLocations() directly
                locationField: "address.location",
                titleField: "name"
            }],
    }

我知道filteredOffices 集合已正确填充，因为 map 上方有一个div 包含正确的结果。

我不明白的是为什么过滤后的办公室没有显示在 map 上？

任何帮助将不胜感激

Answer 1

标记不会更新，因为 dataSource 选项无法绑定(bind)到 observable。作为文档 says observables 仅适用于 center、zoom 和 widget 选项。

要更新您的 map ，您可以订阅 self.filteredOffices 的更改:

self.filteredOffices.subscribe(function(value) {
   $('.map').data('kendoMap').layers[1].dataSource.data(value);
})

Fiddle