我的leaflet地图在折叠左侧面板时显示空白空间。

huangapple
go评论84阅读模式
英文:

My leaflet map is showing blank space while collapsing the left panel

问题

以下是您要翻译的部分：

I'm creating a portal, where am using leaflet map. But when I collapsing my left panel. it showing blank space. how to solve it. Also I have invalidateSize() function . but It's not working. Kindly let me know how to solve it.

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2.     <head>
  3.         <title></title>
  5.          <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
  6.          integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
  7.          crossorigin=""/>
  8.      
  9.         <!-- Make sure you put this AFTER Leaflet's CSS -->
  10.      <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
  11.          integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
  12.          crossorigin=""></script>
  13.     
  14.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  15.     
  16.     
  17.         <style>
  18.             #map { height: 100%; }
  20.             .box {
  21.             }
  23.             .left {
  24.                width:20%;
  25.                background:red;
  26.                float:left;
  27.             }
  29.             .right {
  30.                 width:80%;
  31.                 background:green;
  32.                  float:left;
  33.             }
  35.             .right-100 {
  36.                  width:100%;
  37.             }
  39.             .left-0 {
  40.                  width:0%;
  41.             }
  43.             .collapse {
  44.                 background:blue;
  45.                 color:white;
  46.                 width:100px;
  47.             }
  48.         </style>
  49.     </head>
  50.     <body>
  53.         <div class="collapse" id="collapse">collape it</div>
  54.         <div class="box">
  55.             <div class="left">
  56.                 Hello Shubham
  57.             </div>
  59.             <div class="right ">
  60.                  <div id="map"></div>
  61.             </div>
  62.         </div>
  64.         <script>
  65.             var map = L.map('map').setView([51.505, -0.09], 13);
  67.             L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  68.                 attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  69.                 maxZoom: 18
  70.             }).addTo(map);
  72.             // Listen for the event that fires when the panel is collapsed
  73.             document.getElementById("#collapse").addEventListener("click", function () {
  74.                 alert('sasASas');
  75.                 // Call the invalidateSize method to trigger a recalculation of the map's size
  76.                 map.invalidateSize();
  77.             });
  78.         </script>
  80.         <script>
  81.             $(document).on('click', '.collapse', function () {
  82.                 alert('SasASas');
  83.                 $('.right').addClass('right-100');
  84.                 $('.left').addClass('left-0')
  85.             })
  86.         </script>
  87.     </body>
  88. </html>
英文:

I'm creating a portal, where am using leaflet map. But when I collapsing my left panel. it showing blank space. how to solve it. Also I have invalidateSize() function . but It's not working. Kindly let me know how to solve it.

  1. &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
  2. &lt;head&gt;
  3. &lt;title&gt;&lt;/title&gt;
  4. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.9.3/dist/leaflet.css&quot;
  5. integrity=&quot;sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=&quot;
  6. crossorigin=&quot;&quot;/&gt;
  7. &lt;!-- Make sure you put this AFTER Leaflet&#39;s CSS --&gt;
  8. &lt;script src=&quot;https://unpkg.com/leaflet@1.9.3/dist/leaflet.js&quot;
  9. integrity=&quot;sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=&quot;
  10. crossorigin=&quot;&quot;&gt;&lt;/script&gt;
  11. &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  12. &lt;style&gt;
  13. #map { height: 100%; }
  14. .box {
  15. }
  16. .left {
  17. width:20%;
  18. background:red;
  19. float:left;
  20. }
  21. .right {
  22. width:80%;
  23. background:green;
  24. float:left;
  25. }
  26. .right-100 {
  27. width:100%;
  28. }
  29. .left-0 {
  30. width:0%;
  31. }
  32. .collapse {
  33. background:blue;
  34. color:white;
  35. width:100px;
  36. }
  37. &lt;/style&gt;
  38. &lt;/head&gt;
  39. &lt;body&gt;
  40. &lt;div class=&quot;collapse&quot; id=&quot;collapse&quot;&gt;collape it&lt;/div&gt;
  41. &lt;div class=&quot;box&quot;&gt;
  42. &lt;div class=&quot;left&quot;&gt;
  43. Hello Shubham
  44. &lt;/div&gt;
  45. &lt;div class=&quot;right &quot;&gt;
  46. &lt;div id=&quot;map&quot;&gt;&lt;/div&gt;
  47. &lt;/div&gt;
  48. &lt;/div&gt;
  49. &lt;script&gt;
  50. var map = L.map(&#39;map&#39;).setView([51.505, -0.09], 13);
  51. L.tileLayer(&#39;https://tile.openstreetmap.org/{z}/{x}/{y}.png&#39;, {
  52. attribution: &#39;&amp;copy; &lt;a href=&quot;http://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt;&#39;,
  53. maxZoom: 18
  54. }).addTo(map);
  55. // Listen for the event that fires when the panel is collapsed
  56. document.getElementById(&quot;#collapse&quot;).addEventListener(&quot;click&quot;, function () {
  57. alert(&#39;sasASas&#39;);
  58. // Call the invalidateSize method to trigger a recalculation of the map&#39;s size
  59. map.invalidateSize();
  60. });
  61. &lt;/script&gt;
  62. &lt;script&gt;
  63. $(document).on(&#39;click&#39;, &#39;.collapse&#39;, function () {
  64. alert(&#39;SasASas&#39;);
  65. $(&#39;.right&#39;).addClass(&#39;right-100&#39;);
  66. $(&#39;.left&#39;).addClass(&#39;left-0&#39;)
  67. })
  68. &lt;/script&gt;
  69. &lt;/body&gt;
  70. &lt;/html&gt;

答案1

得分: 0

请尝试这个，我希望它会起作用，只需在您的文档中的点击函数中添加map.invalidateSize();。

  1. &lt;script&gt;
  2. $(document).on(&#39;click&#39;, &#39;.collapse&#39;, function () {
  3.     alert(&#39;SasASas&#39;);
  4.     $(&#39;.right&#39;).addClass(&#39;right-100&#39;);
  5.     $(&#39;.left&#39;).addClass(&#39;left-0&#39;)
  6.     map.invalidateSize();
  7. })
  8. &lt;/script&gt;

如果您需要更多帮助，请告诉我。

英文:

Please try this, i hope it will work, just added map.invalidateSize(); in your document on click function.

  1.  &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
  2. &lt;head&gt;
  3. &lt;title&gt;&lt;/title&gt;
  4. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.9.3/dist/leaflet.css&quot;
  5. integrity=&quot;sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=&quot;
  6. crossorigin=&quot;&quot;/&gt;
  7. &lt;!-- Make sure you put this AFTER Leaflet&#39;s CSS --&gt;
  8. &lt;script src=&quot;https://unpkg.com/leaflet@1.9.3/dist/leaflet.js&quot;
  9. integrity=&quot;sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=&quot;
  10. crossorigin=&quot;&quot;&gt;&lt;/script&gt;
  11. &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  12. &lt;style&gt;
  13. #map { height: 100%; }
  14. .box {
  15. }
  16. .left {
  17. width:20%;
  18. background:red;
  19. float:left;
  20. }
  21. .right {
  22. width:80%;
  23. background:green;
  24. float:left;
  25. }
  26. .right-100 {
  27. width:100%;
  28. }
  29. .left-0 {
  30. width:0%;
  31. }
  32. .collapse {
  33. background:blue;
  34. color:white;
  35. width:100px;
  36. }
  37. &lt;/style&gt;
  38. &lt;/head&gt;
  39. &lt;body&gt;
  40. &lt;div class=&quot;collapse&quot; id=&quot;collapse&quot;&gt;collape it&lt;/div&gt;
  41. &lt;div class=&quot;box&quot;&gt;
  42. &lt;div class=&quot;left&quot;&gt;
  43. Hello Shubham
  44. &lt;/div&gt;
  45. &lt;div class=&quot;right &quot;&gt;
  46. &lt;div id=&quot;map&quot;&gt;&lt;/div&gt;
  47. &lt;/div&gt;
  48. &lt;/div&gt;
  49. &lt;script&gt;
  50. var map = L.map(&#39;map&#39;).setView([51.505, -0.09], 13);
  51. L.tileLayer(&#39;https://tile.openstreetmap.org/{z}/{x}/{y}.png&#39;, {
  52. attribution: &#39;&amp;copy; &lt;a href=&quot;http://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt;&#39;,
  53. maxZoom: 18
  54. }).addTo(map);
  55. &lt;/script&gt;
  56. &lt;script&gt;
  57. $(document).on(&#39;click&#39;, &#39;.collapse&#39;, function () {
  58. alert(&#39;SasASas&#39;);
  59. $(&#39;.right&#39;).addClass(&#39;right-100&#39;);
  60. $(&#39;.left&#39;).addClass(&#39;left-0&#39;)
  61. map.invalidateSize();
  62. })
  63. &lt;/script&gt;
  64. &lt;/body&gt;
  65. &lt;/html&gt;

huangapple
  • 本文由 发表于 2023年2月6日 14:54:33
  • 转载请务必保留本文链接：https://go.coder-hub.com/75358184.html
  • css
  • javascript
  • jquery
  • leaflet
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定