使用 Spring MVC 在 Google Map 上显示标记答案

【问题标题】：Display markers on Google Map using Spring MVC使用 Spring MVC 在 Google Map 上显示标记
【发布时间】：2015-05-19 21:15:16
【问题描述】：

我正在尝试通过从数据库中获取纬度和经度来显示标记。问题是我卡在视图部分。

我将与我的 jsp 文件共享，我想在其中使用 JavaScript API 将标记列表显示到 Google 地图中。

map.jsp:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <title>Auxilium Saver</title>
    <style>
        #map-canvas {
          height: 600px;
          height: 600px;
          margin: 0px;
          padding: 0px
        }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?"></script>

    <script type="text/javascript">
        var markerLat, markerLong;
        markerLat = [
            <c:forEach var="s" items="${listGeo}" varStatus="status">
                [<c:out value="${s.latitude}"/>,
            </c:forEach>];
        markerLong = [
          <c:forEach var="s" items="${listGeo}" varStatus="status">
              [<c:out value="${s.longitude}"/>,
          </c:forEach>];

        function initialize() {
            var map;
            var initlatlng = new google.maps.LatLng(markerLat[0],markerLong[0]);
            var mapOptions = {
                zoom: 6,
                center: new google.maps.LatLng(36,5),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            var infowindow = new google.maps.InfoWindow(); 
            var marker, i;

            for (i = 0; i < markerLat.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(markerLat[i], markerLong[i]),
                    map: map
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(markers[i]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
</html>

MapController.java:

@Controller
public class MapController {

    @Autowired
    private GeolocDAO geolocDAO;

    @RequestMapping(value = "/", method = RequestMethod.GET)
    public ModelAndView getPages(HttpServletRequest request) {
        Geolocation geoloc = geolocDAO.get();
        ModelAndView model = new ModelAndView("map");
        List<Geolocation> listGeo = geolocDAO.list();
        model.addObject("listGeo", listGeo);
        return model;
    }

}

【问题讨论】：

问题是我有一个白色矩形而不是地图...
查看浏览器控制台，可能有错误。然后，尝试在你的 JSP 页面中生成有效的 JS。
当我对纬度和经度使用静态值时，它工作得很好......
正好，看看生成是否OK。
可以，但我需要的是从数据库中显示纬度和经度...

标签： javascript google-maps spring-mvc google-maps-api-3

【解决方案1】：

如 cmets 中所说，您生成的 JS 无效。在示例中查看markerLat 和markerLong 是如何生成的：

markerLat = [
        [51.5286417,

        [48.1549108,

        [34.0204989,

        [41.3947901,
    ];
markerLong = [
      [-0.1015987,

      [11.5418358,

      [-118.4117325,

      [2.1487679,
  ];

好吧，这不是有效的 JavaScript，正如 Google Chrome（或任何其他浏览器，当然还有规范）所说：

所以，在您的 map.jsp 中，更改以下内容：

markerLat = [
    <c:forEach var="s" items="${listGeo}" varStatus="status">
        [<c:out value="${s.latitude}"/>,
    </c:forEach>];
markerLong = [
  <c:forEach var="s" items="${listGeo}" varStatus="status">
      [<c:out value="${s.longitude}"/>,
  </c:forEach>];

为此：

markerLat = [
    <c:forEach var="s" items="${listGeo}">
        <c:out value="${s.latitude}"/>,
    </c:forEach>
];
markerLong = [
  <c:forEach var="s" items="${listGeo}">
      <c:out value="${s.longitude}"/>,
  </c:forEach>
];

这样，就会生成一个有效的 JavaScript，如下所示：

markerLat = [
    51.5286417,

    48.1549108,

    34.0204989,

    41.3947901,
];
markerLong = [
    -0.1015987,

    11.5418358,

    -118.4117325,

    2.1487679,
];

这是我的测试结果：

【讨论】：

@AchrafDelaville 不客气，所以请考虑接受答案:)
我想问你是否有办法在更新的情况下自动显示这些标记而无需重新加载页面。就像移动标记...
@AchrafDelaville 是的，有很多方法可以做到这一点，但这是另一个问题。通过long pooling、websockets、stomp、reverse ajax等进行搜索
谢谢，我试图学习一些关于这个主题的知识，但我发现了很多困难，尤其是在使用 Spring 时。可以请教一些简单的方法吗...
@Bruno César，我们有什么办法可以为每个可以在单击或悬停期间显示的标记添加更多信息