Question

我正在编写一个有效的办公室定位器。作为其中的一部分，我想在初始位置的某个半径内添加标记，并将引脚放在kendo 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;
        }
    });

并使用以下选项创建地图本身： -

   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"
            }],
    }

我知道filterOffices集合正在正确填充，因为地图上方有一个包含正确结果的div。

我能解决的问题是为什么过滤的办公室没有显示在地图上？

非常感谢任何帮助

Answer 1

标记不会更新，因为dataSource选项无法绑定到observable。由于文档says可观察量仅适用于center，zoom和widget选项。

要更新地图，您可以订阅self.filteredOffices的更改：

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

Fiddle

使用ko.computed和kendoMap绑定动态地将标记添加到kendoMap

1 个答案: