leaflet 相关问题

我在我的应用程序中使用 Leafletjs 和谷歌地图图块。这是我的 HTML 标记： <... 我在我的应用程序中使用 Leafletjs 和谷歌地图图块。这是我的 HTML 标记： <div class="map-wrap" style="display: none;"> <div id="map"></div> </div> <div class="rightNav"> <a href="#" onclick="$.expandMap();">Expand Map</a> </div> 在javascript文件中，我有以下代码： $.expandMap = function() { if ($(".rightNav").is(':visible')){ $(".map-wrap").animate({width:'70%'},'400'); $(".rightNav").hide(0); map.invalidateSize(); //L.Util.requestAnimFrame(map.invalidateSize, map, false, map._container); } } 地图容器扩展良好。但地图并没有扩大。 map.invalidateSize 不会扩展地图或填充外部 div（容器）。 L.Util.requestAnimFrame(map.invalidateSize, map, false, map._container);也失败了。但是，如果我稍微调整浏览器窗口的大小，地图就会填充外部容器。所以我想尝试使用 jQuery 以编程方式模拟窗口大小调整。但也没有扩大地图。请让我知道我做错了什么。谢谢叶霍沙法。我不想要全屏地图。我只是想扩大一点地图。最后，我使用下面的代码让它工作： $.expandMap = function() { if ($(".rightNav").is(':visible')){ $(".map-wrap").animate({width:'70%'},'400'); $(".rightNav").hide(0); setTimeout(function(){ map.invalidateSize()}, 400); } } 地图现在会扩展以填充外部容器的扩展空间。不是很顺利；但它有效。我建议您使用以下插件：https://github.com/brunob/leaflet.fullscreen，它添加了一个全屏按钮，自动展开地图，如下图所示：：。

google-maps leaflet

回答 2 投票 0

Angular 属性不存在：在 Ionic 7 Angular 18 应用程序中使用 leaflet 和 leaflet-gpx

我正在尝试使用 Leaflet 的 GPX 插件将传单上的 GPX 文件显示到我的 Ionic Angular 应用程序中。在 VS Code 中，一切看起来都很好，但是当我运行 Ionic Serve 时，出现以下错误...

angular ionic-framework leaflet

回答 1 投票 0

可以删除带有图像的传单链接

我使用传单指令来使用传单创建地图。是否可以从地图上删除传单链接和 OSM 版权。我想改为放入传单图片。

leaflet angular-leaflet-directive

回答 5 投票 0

平滑传单中的海拔图

我正在使用 Leaflet + leaflet-elevation.js 开发这张地图。在页面底部，它正确显示了图形，但看起来 GPX 文件中的每个点都有一个点。难道是……

leaflet

回答 1 投票 0

合并并绘制多个等时线

我喜欢做什么我喜欢在地图上的多个位置绘制等时线，这样我就可以直观地找到从任意城镇到最近位置的旅行时间。它应该看起来像一个内核巢穴......

r leaflet gis osrm

回答 3 投票 0

Vue2-leaflet：在点击事件上为标记添加动画效果

想知道是否可以在单击事件上向标记添加动画效果，并在用户单击其他位置后删除该效果。

onclick leaflet vue2leaflet

回答 1 投票 0

制作传单离线地图（使用本地地图图块）但什么也没有显示

它正在像这样的传单在线地图上工作从“传单”导入 L；导出默认值{ 安装（）{ var map = L.map('地图').setView([25.042474, 121.513729], 13); L.tileLayer('https://{s}...</desc> <question vote="0"> <p>它正在像这样的传单在线地图上工作</p> <pre><code><script> import L from 'leaflet'; export default { mounted() { var map = L.map('map').setView([25.042474, 121.513729], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 13, minZoom:2 }).addTo(map); }, }; </script> </code></pre> <p>当我尝试在本地制作地图图块时，html 上什么也没有显示（使用MobileAtlasCreator制作地图图块）</p> <pre><code><script> import L from 'leaflet'; export default { mounted() { var map = L.map('map').setView([25.042474, 121.513729], 13); L.tileLayer('./img/mapTiles/{z}/{x}/{y}.png', { maxZoom: 13, minZoom:2 }).addTo(map); }, }; </script> </code></pre> <p>这是我下面的参考</p> <p><a href="https://stackoverflow.com/questions/43608919/html-offline-map-with-local-tiles-via-leaflet">通过 Leaflet 提供带有本地图块的 HTML 离线地图</a></p> <p><a href="https://www.youtube.com/watch?v=oP4bCLtXIeY" rel="nofollow noreferrer">https://www.youtube.com/watch?v=oP4bCLtXIeY</a></p> <p>非常感谢</p> </question> <answer tick="false" vote="0"> <p>由于您计划在本地环境中工作（或之后使用它），我将从代码中取出导入片段。它已经安装好了，我明白了；但下载完这些图块后，只需在本地工作即可。将它们放在一个文件夹中，然后使用您拥有的代码加载它们。你的代码没问题！这是我的例子：</p> <pre><code> var m = {x: 41.892594, y: 12.484371}; var SELF_Map = L.tileLayer('empire/{z}/{x}/{y}.jpg', { //attribution: 'none', continuousWorld: false, minZoom: 4, maxZoom: 10, tap: false }).addTo(map); map.setView({lat: m.x, lng: m.y}, 6); </code></pre> <p>每次都对我有用。我从我最喜欢的地图提供商那里获取图像，下载它们并将它们存储在一个文件夹中，在本例中是一个名为“empire”的文件夹。</p> </answer> <answer tick="false" vote="0"> <p>尝试这个方法：</p> <pre><code> const tileLayer = new L.tileLayer.offline( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>', minZoom: 5, maxZoom: 20, crossOrigin: true, }, localforage ); tileLayer.addTo(map); </code></pre> </answer> </body></html>

javascript html leaflet offline

回答 0 投票 0

leaflet 相关问题

最新问题