javascript - 在 Knockout 中调整 Leaflet JS map 的大小

Question

初学者，在通过 KnockoutJS 更改 CSS 后调整传单 map 的大小时遇到​​问题。

我的想法是在按下顶部栏上的按钮(并触发我的 JS 中的 toggleSidebar 函数)时在左侧为侧边栏留出 250 像素的空间。

我的问题是 map 没有改变大小。

我有一张传单 map :

    <div id="map-container" data-bind="css: sidebarVisible">
        <div id="map"></div>
    </div>

以下 CSS:

html,
body {
    font-family: Arial, sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
}

.wrapper {
    display: flex;
    width: 100%;
    height: 600px;
}

#map {
    height: 100%;
    width: 100%;
}

#map-container {
    position: absolute;
    top: 40px;
    height: calc(100% - 40px);
    width: 100%;
}

#map-container.moveForSidebar {
    left: 250px;
    width: calc(100% - 250px);
}

和以下 JS:

// Create Map
var map = L.map('map').setView([52.518611, 13.376111], 14);

layer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoidHJpcGxlIiwiYSI6ImNqaW9nbXVpYzBiNjUza3FlaWJqbno2aXQifQ.gZIoqCkam1hIriIj3Mr-lw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox.streets'
});

layer.addTo(map);

// Toogle Sidebar Functionality
this.visibilityToggle = ko.observable(true);

this.sidebarVisible = ko.pureComputed(function() {
    return self.visibilityToggle() ? "moveForSidebar" : "";
}, ViewModel);

this.toggleSidebar = function() {
    self.visibilityToggle = !self.visibilityToggle;
    console.log(self.visibilityToggle);
    map.invalidateSize();
};

手动更改 visibilityToggle 并刷新页面实际上以我想要的方式显示 map 。但是，通过函数更改它并调用 invalidateSize 不会。

This问题似乎很相似，他似乎正在使用相同的功能来调整 map 的大小。我也尝试像他那样添加超时，但正如预期的那样，它没有帮助。

非常感谢任何帮助，这在过去的几个小时里一直让我发疯:/

Answer 1

在您的 toggleSidebar 函数中，您覆盖了 visibilityToggle observable 而不是设置它的值。它应该看起来像

self.visibilityToggle(!self.visibilityToggle());

reference: http://knockoutjs.com/documentation/observables.html

Not all browsers support JavaScript getters and setters (* cough * IE * cough *), so for compatibility, ko.observable objects are actually functions.

• To read the observable’s current value, just call the observable with no parameters. In this example, myViewModel.personName() will return 'Bob', and myViewModel.personAge() will return 123.

• To write a new value to the observable, call the observable and pass the new value as a parameter. For example, calling myViewModel.personName('Mary') will change the name value to 'Mary'.