Question

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

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

我的问题是地图不会更改大小。

我有一张传单地图：

    <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问题似乎很相似，他似乎正在使用相同的功能来调整地图大小。我也尝试像他一样添加“超时”，但没有达到预期的效果。

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

Answer 1

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

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

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

并非所有浏览器都支持JavaScript getter和setter（*咳嗽* IE   *咳嗽*），因此出于兼容性考虑，ko.observable对象实际上是函数。



要读取可观察对象的当前值，只需使用   没有参数。在此示例中，myViewModel.personName（）将返回   “鲍勃”和myViewModel.personAge（）将返回123。



要写入可观察对象的新值，请调用可观察对象并传递   新值作为参数。例如，打电话   myViewModel.personName（'Mary'）会将名称值更改为'Mary'。

在淘汰赛中调整传单JS地图的大小

1 个答案: