尝试放大和缩小包含在 div 标签中的地图时，传单地图图块未完全加载

Question

我正在尝试在 div 标签中加载传单地图。

有时地图图块会完全加载。每当我尝试放大或缩小地图时，图块都没有完全加载。我尝试了导入传单 CSS 样式等解决方案，并尝试在地图放大时调用 invalidateSize 函数。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import 'leaflet/dist/leaflet.css';
import 'leaflet-draw/dist/leaflet.draw.css';
import L from 'leaflet';
import {} from "mapbox-gl-leaflet";
import 'leaflet-fullscreen';
import 'leaflet-fullscreen/dist/leaflet.fullscreen.css';
import 'leaflet.gridlayer.googlemutant';

class Map extends Component {

  componentDidMount() {
    this.initializeMap();
  }

  initializeMap = () => {
    const { defaultLocation,
      handleCloseMap, handleFieldErrorChanged, user } = this.props;
    this.map = L.map('map', {
      center: [...defaultLocation].reverse(),
      zoom: 20,
      fullscreenControl: true
    });
      L.gridLayer.googleMutant({ type: 'satellite', maxZoom: 20 }).addTo(this.map);
        }
      });
    }
  }


  render() {
    return <div id="map" className={styles.map} />;
  }
}

Answer 1

尝试在 fiddle 中重现上述问题时仅使用 Javascript。地图渲染正确所以我得出的结论是渲染地图没有问题。在调试时，我发现包含地图的 div 元素的一个父元素具有属性文本对齐：居中，这导致地图无法完全加载图块。删除它后地图按预期呈现。我希望它可以帮助某人在元素（如 div）中渲染地图时考虑很少发生的父元素的对齐。

尝试放大和缩小包含在 div 标签中的地图时，传单地图图块未完全加载

Leaflet maps tiles are not loading completely when tried to zoomin and zoomout tha map which contained in a div tag

google-maps

modal-dialog

leaflet

reactjs