[英]How to render a map with bounds which are saved on zoomend function in leaflet
I have to save the Zoom level of the Map.我必须保存地图的缩放级别。 In zoom end function of Map I saved it in a local storage and while again the component is rendered, I tried to check whether any zoom value is preserved or not.在 Map 的缩放结束功能中,我将其保存在本地存储中,再次渲染组件时,我尝试检查是否保留了任何缩放值。 Based on it I tried to render the Map.Everythings works fine but I need to save the location also so I tried to get the bounds and do the same as in Zoom level.It's not working I tried to apply fitBounds if there is any value in local storage.基于它,我尝试渲染 Map.Everythings 工作正常,但我也需要保存位置,所以我尝试获取边界并执行与缩放级别相同的操作。如果有任何值,我尝试应用 fitBounds在本地存储中。 Please help me to solve this issue.请帮我解决这个问题。
initializeMap = () => {
const { user } = this.props;
const zoomLevel = localStorage.getItem('itemsZoom');
let boundCoordinates = {};
boundCoordinates = JSON.parse(localStorage.getItem('itemsBounds'));
if (zoomLevel !== null && Object.keys(boundCoordinates).length > 0) {
this.map.fitbounds(boundCoordinates);
}
this.map.fitbounds(boundCoordinates);
this.map = L.map('map', {
center: [38.778, -73.554]
zoom: zoomLevel !== null ? zoomLevel : 18
});
L.gridLayer.googleMutant({ type: 'satellite', maxZoom: 20 }).addTo(this.map);
this.map.on(L.Draw.Event.CREATED, (e) => {
this.onMarkerCreated(e);
});
this.map.on('draw:editmove', (e) => {
this.onMarkerEdited(e);
});
this.map.on('zoomend', (e) => {
const zoom = this.map.getZoom();
localStorage.setItem('itemsZoom', zoom);
const bounds = this.map.getBounds();
localStorage.setItem('itemsBounds', JSON.stringify(bounds));
});
}
use this to save the bounds localStorage.setItem('itemsBounds',this.map.getBounds().toBBoxString()))
and then when you read out call:使用它来保存边界localStorage.setItem('itemsBounds',this.map.getBounds().toBBoxString()))
然后当你读出调用时:
[west, south, east, north] = localStorage.getItem('itemsBounds').split(',').map(parseFloat)
var bounds = new L.LatLngBounds(new L.LatLng(south, west), new L.LatLng(north, east))
this.map.fitBounds(bounds);
PS: fitBounds
with "B" PS:带有“B”的fitBounds
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.