使用 Spring MVC 框架工作，如何迭代列表并在 bingmap 中创建引脚？

Question

我正在使用 API 版本 8，而运行这段代码，我可以得到只有一个引脚在列表中的第一个 object 中有数据。

这里的列表有 object 来自 object 我们有 Latitude 、 Longitude 、 Title 和 Description 。

迭代已成功完成，但只有第一个数据反映在 BingMap 中。

如何从列表中获取所有引脚并反映在 BingMap 中。

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type='text/javascript'
    src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async
    defer></script>
<style>
#myMap {;
    width: 800px;
    height: 600px;
}

#inputForm {;
    top: 200px;
    left: 250px;
    padding: 10px;
    background-color: white;
    border: 1px solid #000;
    border-radius: 10px;
}
</style>
</head>
<body>
    <div id="myMap" style=""></div>

    <script type='text/javascript'>
        var map, infobox, currentPushpin;

        function GetMap() {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials : 'bing map key',
                zoom : 0
            });
            document.getElementById('inputForm').style.display = '';

            var lat = document.getElementById('lat').value;

            var lon = document.getElementById('lon').value;

            var center = new Microsoft.Maps.Location(lat, lon);

            //Create a pushpin.
            currentPushpin = new Microsoft.Maps.Pushpin(center);
            currentPushpin.metadata = {
                title : document.getElementById('title').value,
                description : document.getElementById('description').value
            };

            //Add a click event to the pushpin.
            Microsoft.Maps.Events.addHandler(currentPushpin, 'click',
                    pushpinClicked);

            //Add the pushpin to the map.
            map.entities.push(currentPushpin);
        }
        function pushpinClicked(e) {

            //Create an infobox that will render in the center of the map.
            infobox = new Microsoft.Maps.Infobox(e.target.getLocation(), {
                title : e.target.metadata.title,
                description : e.target.metadata.description
            });
            //Assign the infobox to a map instance.
            infobox.setMap(map);
        }
    </script>
    <div id="inputForm" style="display: none;">

        <TABLE>
            <c:forEach var="message" items="${list}">
                <tr>
                    <td><input id="lat" type="hidden" value="${message.lat}" /> <input
                        id="lon" type="hidden" value="${message.lon}" /> <input
                        id="title" type="hidden" value="${message.title}" /> <input
                        id="description" type="hidden" value="${message.description}" />
                    </td>
                </tr>
            </c:forEach>
        </TABLE>
    </div>
</body>
</html>

Answer 1

这实际上不是 Bing 地图问题，而是 Spring MVC 问题。查看您的 HTML，我看到的第一个问题是您 table 中的每个项目都分配了一个 ID。 ID 在 HTML 中应该是唯一的，但是使用您拥有的代码，您最终将创建具有相同 ID 的多个元素，这在技术上创建了一个无效的 HTML，您将只能检索ID 的最后一项。像这样从 t a table 中提取数据可能不是实现应用程序的最佳方式。可能有一些方法可以使用 Spring MVC 生成 JSON 对象，但是我不熟悉 Spring MVC 开发。如果您想继续使用您正在使用的方法，我建议将 ID 更改为 classes，然后您将能够通过 class 名称检索元素。这是一个值得尝试的例子。

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
 <!DOCTYPE html>
 <html>
 <head>
 <title></title>
 <meta charset="utf-8" />
 <script type='text/javascript'
     src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async
     defer></script>
 <style>
 #myMap {;
     width: 800px;
     height: 600px;
 }

 #inputForm {     
     padding: 10px;
     background-color: white;
     border: 1px solid #000;
     border-radius: 10px;
 }
 </style>
 </head>
 <body>
     <div id="myMap" style=""></div>

     <script type='text/javascript'>
         var map, infobox, currentPushpin;

         function GetMap() {
             map = new Microsoft.Maps.Map('#myMap', {
                 credentials : 'bing map key',
                 zoom : 0
             });

             //Create a reusable infobox
             infobox = new Microsoft.Maps.Infobox(map.getCenter(), {visible: false});
             infobox.setMap(map);

             document.getElementById('inputForm').style.display = '';

             var lats = document.getElementsByClassName('lat');
             var lons = document.getElementsByClassName('lon');
             var titles = document.getElementsByClassName('titles');
             var descriptions = document.getElementsByClassName('description');

             //The lats, lons, titles and descriptions values should be arrays of equal length.

             var loc, pin;

             for(var i = 0, len = lats.length; i < len; i++){
                loc = new Microsoft.Maps.Location(parseFloat(lats[i].value), parseFloat(lons[i].value));
                pin = 

                pin.metadata = {
                    title : titles[i].value,
                    description : descriptions[i].value
                };

                Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);

                map.entities.push(pin);
            }
         }

         function pushpinClicked(e) {
             //Create an infobox that will render in the center of the map.
             infobox.setOptions({
                location: e.target.getLocation(),
                title : e.target.metadata.title,
                description : e.target.metadata.description,
                visible: true
             });
         }
     </script>
     <div id="inputForm" style="display: none;">

         <TABLE>
             <c:forEach var="message" items="${list}">
                 <tr>
                     <td><input class="lat" type="hidden" value="${message.lat}" /> <input
                         class="lon" type="hidden" value="${message.lon}" /> <input
                         class="title" type="hidden" value="${message.title}" /> <input
                         class="description" type="hidden" value="${message.description}" />
                     </td>
                 </tr>
             </c:forEach>
         </TABLE>
     </div>
 </body>
 </html>

使用 Spring MVC 框架工作，如何迭代列表并在 bingmap 中创建引脚？

Using Spring MVC Frame work , How to iterate a list and create pins in bingmap?

javascript

spring-mvc

bing-maps

dom-events