第二张传单地图无法正确呈现 [英] 2nd leaflet map not rendering correctly

问题描述

我有2个标签，每个标签都有一个传单地图.第一张地图正确呈现，但是第二张地图仅显示一个图块(其余为灰色)，并且该地图未居中在正确的区域上.我究竟做错了什么?谢谢.

I have 2 tabs, each has a leaflet map. The first map is rendering correctly, but the second map is only displaying 1 tile (the rest grey) and the map is not centered on the correct area. What am I doing wrong? Thanks.

  var map = L.map('tab-1').setView([latitude, longitude], 5);

  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: '',
    accessToken: ''
  }).addTo(map);

  var map2 = L.map('tab-2').setView([latitude, longitude], 5);

  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: '',
    accessToken: ''
  }).addTo(map2);

推荐答案

如果未显示包含第二张地图的div(我想它位于displayed: none; CSS/样式的标签"中)，则Leaflet将无法正确确定地图容器的大小.

If the div that contains your 2nd map is not displayed (I guess it is within a "tab" with displayed: none; CSS / style), Leaflet will not be able to determine properly the map container size.

然后，当您的第二张地图显示出来时，其容器大小会发生变化，但是Leaflet并没有意识到，仍然使用以前的大小.

Then once your 2nd map is revealed, its container size changes, but Leaflet does not realize and still uses the previous size.

一旦地图显示出来，您就可以简单地调用 map2.invalidateSize() 用瓷砖覆盖新区域.

You can simply call map2.invalidateSize() once that map is revealed so that Leaflet now covers the new area with tiles.

您还需要重新设置视图(使用setView或fitBounds或您喜欢的任何方法)，就像以前使用不正确的容器界限进行的操作一样.

You will also need to re-set the view (using setView or fitBounds or whatever method you prefer) as it was done previously using incorrect container bounds.

演示: http://jsfiddle.net/ve2huzxw/52/

(取消注释第21行，然后重新运行以获取正确的行为)

(uncomment line 21 and re-run to get the correct behaviour)

原始答案:

欢迎您！

您真的使用两次L.map(location)，并且使用相同的location吗?

Are you really using twice L.map(location), with the same location?

在我看来，Leaflet会尝试在同一容器中创建2张地图.我想这会产生意想不到的结果……

It seems to me that Leaflet would try to create 2 maps in the same container. I guess it would produce unexpected result…

这可能是一个错字，不是吗?

This is probably a typo, is not it?

这篇关于第二张传单地图无法正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！