时间戳

首页 > 解决方案 > 使用百里香和谷歌地图绘制不同的纬度和经度

javascript - 使用百里香和谷歌地图绘制不同的纬度和经度

问题描述

我得到了多个纬度和经度，我正在尝试在谷歌地图中绘图，但我不知道该怎么做，我认为我的问题出在 HTML 中。

这是我使用 Spring 的 Java 代码：

``

@RequestMapping("/mapausuarios") //controlador que controla lo que viene a la raíz
public String mapausers(Model model) throws ParseException {

        tablausuario tu = new tablausuario();
        ArrayList<usuario> user = tu.listausuarios();
        Collections.sort(user, (o1, o2) -> o2.getCreatedAt().compareTo(o1.getCreatedAt())); //tabla ordenada
        model.addAttribute("TodosLosUsuarios", user);

    return "mapausers";

}

我可以使用以下方法在表格中提取纬度和经度：

                    <tbody  th:each="usuariosTotales: ${TodosLosUsuarios}" >
                        <tr>
                        <td th:text=" ${usuariosTotales.getLatitude()} " ></td>
                        <td th:text=" ${usuariosTotales.getLongitude()} " ></td>
                        </tr>
                    </tbody>

但我不知道如何循环并绘制到我的脚本中：



       <div id="map"></div>
       var geocoder;
       var map;

       <script>
           // Initialize and add the map
           function initMap() {
               // The location of Uluru
               var uluru = {lat: 40.416775, lng: -3.703790};
               // The map, centered at Uluru
               var map = new google.maps.Map(
                       document.getElementById('map'), {zoom: 4, center: uluru});
               // The marker, positioned at Uluru
               var marker = new google.maps.Marker({position: uluru, map: map});
           }
       </script>
       <script async defer
               src="https://maps.googleapis.com/maps/api/js?key=***********&callback=initMap">
       </script>

请帮忙！

标签： javascripthtmlspringmapsthymeleaf

解决方案

<script th:inline="javascript">
  var user = ${TodosLosUsuarios} ;

   function plotUser(user) {
       // The location of Uluru
       var uluru = {lat: user.latitude, lng: user.longitude};
       // The map, centered at Uluru
       var map = new google.maps.Map(
               document.getElementById('map'), {zoom: 4, center: uluru});
       // The marker, positioned at Uluru
       var marker = new google.maps.Marker({position: uluru, map: map});
   }

  function loadUsers()
   {
        var user = ${TodosLosUsuarios} ;
        for(var i=0;i<users.length;i++)
        {
            plotUser(users[i]);
        }           
   }


<script async defer
   src="https://maps.googleapis.com/maps/api/js?key=***********&callback=loadUsers">

为了绘制用户，您需要将用户数据存储在前端，这是解决方案之一。我希望它对你有用

推荐阅读