如何渲染帶有邊界的地圖，這些邊界保存在傳單中的 zoomend 函數中

Question

我必須保存地圖的縮放級別。 在 Map 的縮放結束功能中，我將其保存在本地存儲中，再次渲染組件時，我嘗試檢查是否保留了任何縮放值。 基於它，我嘗試渲染 Map.Everythings 工作正常，但我也需要保存位置，所以我嘗試獲取邊界並執行與縮放級別相同的操作。如果有任何值，我嘗試應用 fitBounds在本地存儲中。 請幫我解決這個問題。

    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));
    });
   }

Answer 1

使用它來保存邊界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：帶有“B”的fitBounds