当前位置： 文江博客话题详情

在桌子中显示几张图片

发布于 2025-01-27 06:09:20 字数 1924 浏览 1 评论 0原文

我正在尝试使用Flays＆amp;试图在表中显示几张地图。胸腺。这意味着我必须以不同的方式命名每个地图容器，或者否则会遇到错误，因为具有此类名称的容器已经初始化。我设法使用Thymeleaf的标准表达语法进行了操作，到目前为止尚未获得误差，但地图没有显示。我正在使用这些表达式来命名“路由ID”之后，即数字字符串。 如果有人可以就我做错了什么提供一些建议，那将不胜感激。

        <tbody>         
                <tr th:each="route: ${listRoutes}">
                    <form th:action="@{/delete_route}" method="get">             
                        <td><input type="hidden" name ="routeID" th:value="${route.id}" class="form-control"></input> [[${route.id}]] </td>
                        <td><div th:id="${route.id}"></div>Map Container </td>
                        <td th:text="${route.owner.id}">Owner</td>
                        <td th:text="${route.participants}">Participants</td>
                        <td style="cursor:pointer"><input type="submit" value="Delete Route" class="btn btn-primary" /> </td>                  
                    <script th:inline="javascript">          
                        var map = new L.map("[[${route.id}]]");
                        
                        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap </a>',
                        maxZoom: 18
                        }).addTo(map);
                            
                        L.control.scale().addTo(map);
                        var gpx = /*[[${route.directions}]]*/ "";
                        new L.GPX(gpx, {async: true}).on('loaded', function(e) {
                        map.fitBounds(e.target.getBounds());
                        
                        }).addTo(map);
                    </script>
                    </form> 
                </tr>
            </tbody>
原文

I am trying to display several maps within a table, using Leaflet & Thymeleaf. This means that I have to name each map container differently or otherwise I get an error because a container with such name is already initialised. I managed to do it using Thymeleaf's standard expression syntax and got no erros so far but the maps are not displaying. I am using these expressions to name the map container's id after a 'route id' which is a numeric string.
if anybody could offer some advice on what am I doing wrong, it will be much appreciated.

        <tbody>         
                <tr th:each="route: ${listRoutes}">
                    <form th:action="@{/delete_route}" method="get">             
                        <td><input type="hidden" name ="routeID" th:value="${route.id}" class="form-control"></input> [[${route.id}]] </td>
                        <td><div th:id="${route.id}"></div>Map Container </td>
                        <td th:text="${route.owner.id}">Owner</td>
                        <td th:text="${route.participants}">Participants</td>
                        <td style="cursor:pointer"><input type="submit" value="Delete Route" class="btn btn-primary" /> </td>                  
                    <script th:inline="javascript">          
                        var map = new L.map("[[${route.id}]]");
                        
                        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap </a>',
                        maxZoom: 18
                        }).addTo(map);
                            
                        L.control.scale().addTo(map);
                        var gpx = /*[[${route.directions}]]*/ "";
                        new L.GPX(gpx, {async: true}).on('loaded', function(e) {
                        map.fitBounds(e.target.getBounds());
                        
                        }).addTo(map);
                    </script>
                    </form> 
                </tr>
            </tbody>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

马蹄踏│碎落叶 2025-02-03 06:09:20

一些注释以扩展我的最后一个问题：

（1）将所有映射javascript移动到表之后的单个脚本中； （2）构建一个地图对象的数组var maps = [];。 （3）使用Thymeleaf对 javascript Inlining 地图ID的列表，并将每个地图推到数组中。

我假设有一个路由类（或类似的内容），如以下内容：

public class Route {

    private final int id;
    private final int ownerId;
    private final String participants;
    private final String directions; // the URL of a GPX file

    public Route(int id, int ownerId, String participants, String directions) {
        this.id = id;
        this.ownerId = ownerId;
        this.participants = participants;
        this.directions = directions;
    }
    
    // getters not shown
    
}

该模型随后包含list＆lt; route＆gt; listroutes用于使用百里香。

胸腺模板看起来像以下内容。

我简化了这一点以删除表单，并专注于整体结构＆amp;数据处理：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Test</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="/js/my_script.js"></script>
        <link rel="stylesheet" type="text/css" href="/css/main.css"/>

        <!-- leaflet and gpx -->
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
              integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
              crossorigin=""/>
        <script src="https://unpkg.com/[email protected]/dist/leaflet.js" crossorigin=""
                integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>

        <style>
            .mapContainer {
                height: 200px;
                width: 500px;
            }
        </style>
    </head>

    <body>

        <table>
            <tbody>         
                <tr th:each="route: ${listRoutes}">
                    <td><div th:id="${route.id}" class="mapContainer"></div></td>
                </tr>
            </tbody> 
        </table>

        <script th:inline="javascript">
            var routes = /*[[${listRoutes}]]*/ [];
            //var maps = [];
            document.addEventListener("DOMContentLoaded", function (event) {

                routes.forEach((route) => {
                    let map = L.map(route.id.toString());

                    //maps.push(map);

                    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=YOUR TOKEN HERE', {
                        attribution: 'ATTRIBUTION INFO HERE',
                        maxZoom: 18,
                        id: 'mapbox/streets-v11',
                        tileSize: 512,
                        zoomOffset: -1
                    }).addTo(map);

                    L.control.scale().addTo(map);

                    var gpx = route.directions; // the URL of the GPX data
                    new L.GPX(gpx, {async: true}).on('loaded', function (e) {
                        map.fitBounds(e.target.getBounds());
                    }).addTo(map);
                });

            });
        </script>
    </body>
</html>

现在，HTML表更简单。

＆lt; script th：inline =“ javascript”＆gt;允许胸腺允许thymeleaf渲染list＆lt; route＆gt;数据作为JavaScript对象的数组：

var routes = /*[[${listRoutes}]]*/ [];

之后，您，您可以根据需要构建每张地图。

（我实际上不需要使用var maps = []; - 我的评论的一部分是不正确的。）

Some notes to expand on my last comment in the question:

(1) Move all your map JavaScript into a single script, after the table; (2) Build an array of map objects var maps = [];. (3) Use Thymeleaf's support for JavaScript inlining to iterate over a list of your map IDs, and create each map by pushing it onto the array.

I assume there is a Route class (or something similar), which looks like the following:

public class Route {

    private final int id;
    private final int ownerId;
    private final String participants;
    private final String directions; // the URL of a GPX file

    public Route(int id, int ownerId, String participants, String directions) {
        this.id = id;
        this.ownerId = ownerId;
        this.participants = participants;
        this.directions = directions;
    }
    
    // getters not shown
    
}

The model then contains a List<Route> listRoutes for Thymeleaf to use.

The Thymeleaf template will look something like the following.

I have simplified this to remove the form, and to just focus on the overall structure & processing of the data:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Test</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="/js/my_script.js"></script>
        <link rel="stylesheet" type="text/css" href="/css/main.css"/>

        <!-- leaflet and gpx -->
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
              integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
              crossorigin=""/>
        <script src="https://unpkg.com/[email protected]/dist/leaflet.js" crossorigin=""
                integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>

        <style>
            .mapContainer {
                height: 200px;
                width: 500px;
            }
        </style>
    </head>

    <body>

        <table>
            <tbody>         
                <tr th:each="route: ${listRoutes}">
                    <td><div th:id="${route.id}" class="mapContainer"></div></td>
                </tr>
            </tbody> 
        </table>

        <script th:inline="javascript">
            var routes = /*[[${listRoutes}]]*/ [];
            //var maps = [];
            document.addEventListener("DOMContentLoaded", function (event) {

                routes.forEach((route) => {
                    let map = L.map(route.id.toString());

                    //maps.push(map);

                    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=YOUR TOKEN HERE', {
                        attribution: 'ATTRIBUTION INFO HERE',
                        maxZoom: 18,
                        id: 'mapbox/streets-v11',
                        tileSize: 512,
                        zoomOffset: -1
                    }).addTo(map);

                    L.control.scale().addTo(map);

                    var gpx = route.directions; // the URL of the GPX data
                    new L.GPX(gpx, {async: true}).on('loaded', function (e) {
                        map.fitBounds(e.target.getBounds());
                    }).addTo(map);
                });

            });
        </script>
    </body>
</html>

Now, the HTML table is much simpler.

The use of <script th:inline="javascript"> allows Thymeleaf to render the List<Route> data as an array of JavaScript objects:

var routes = /*[[${listRoutes}]]*/ [];

After that, you can build each map as needed.

(I did not actually need to use var maps = []; - that part of my comment was incorrect.)

回复 原文
~没有更多了~

关于作者

独夜无伴

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

达拉崩吧

文章 0 评论 0

PANGOO

文章 0 评论 0

kkgtx

文章 0 评论 0

WordPress小学生

文章 0 评论 0

酷炫老祖宗

文章 0 评论 0

硪扪都還晓

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文