在 Knockout 中调整 Leaflet JS 地图的大小

Posted 2023-03-27

【中文标题】在 Knockout 中调整 Leaflet JS 地图的大小

【英文标题】：Resize Leaflet JS Map in Knockout

【发布时间】：2018-12-01 04:07:04

【问题描述】：

这里是初学者，在通过 KnockoutJS 更改 CSS 后无法调整传单地图的大小。

这个想法是每当按下顶栏上的按钮时在左侧为侧边栏留出 250 像素的空间（并在我的 JS 中触发 toggleSidebar 函数）。

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

我有一张传单地图：

    <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 并刷新页面实际上会以我想要的方式显示地图。但是通过函数更改它并调用invalidateSize 不会。

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

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

【问题讨论】：

我不知道这是否是您唯一的问题，但在您的 toggleSidebar 函数中，您覆盖了 visibilityToggle 可观察对象，而不是设置其值。它应该看起来像 self.visibilityToggle(!self.visibilityToggle());

@JasonSpake 是的，这成功了，非常感谢！ （如果您发布它，很高兴接受它作为答案）

太棒了，我很高兴这样做

【参考方案1】：

在您的 toggleSidebar 函数中，您将覆盖 visibilityToggle 可观察对象，而不是设置其值。它应该看起来像

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

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

并非所有浏览器都支持 javascript getter 和 setter（*咳* IE *咳*)，所以为了兼容性，ko.observable对象其实是函数。

要读取 observable 的当前值，只需调用 observable 没有参数。在本例中，myViewModel.personName() 将返回 'Bob' 和 myViewModel.personAge() 将返回 123。

要向可观察对象写入一个新值，调用可观察对象并传递 新值作为参数。例如，调用 myViewModel.personName('Mary') 会将名称值更改为 'Mary'。