Question

我需要在单个页面上的不同地图上显示多个项目的坐标。

要做到这一点，我需要做类似于下面的代码。问题是如何将地图名称和坐标列表传递给JavaScript？

我可以传递的值是以下三个值

    ${location.lat}
    ${location.long}
    ${location.mapName}

JSP

我遍历列表以显示每个位置的名称，我也尝试将每个地图的ID设置为另一个。

<c:forEach var="location" items="${locations}">
    <div id="item">
          <h1>${location.name}</h1>
          <div id="${location.mapName}"></div>      
    </div>
</c:forEach>

<script>
...
var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng(0.0, 0.0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
    map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

    map2 = new google.maps.Map(document.getElementById("map_canvas2"),
                                   myOptions);  
}

</script>

enter image description here

Answer 1

首先，由于Location是一个java对象，因此您不能拥有名为long的属性。此外，<div id="item"> forEach将Location生成对象，将在DOM上生成具有重复ID的对象。

对于测试，我创建了一个public class Location { private double lat; private double lng; private String mapName; private String name; // getters and setters }对象，如下所示：

locations

以一种简单的方式，只需迭代<c:forEach var="location" items="${locations}"> <h5>${location.name}</h5> <div id="${location.mapName}" style="height: 180px; width: 400px;"></div> </c:forEach>即可创建地图的位置，如下所示：

<c:forEach var="location" items="${locations}">
    var latLng_${location.mapName} = new gm.LatLng(${location.lat}, ${location.lng});
    var options_${location.mapName} = {
        zoom: 14,
        center: latLng_${location.mapName},
        mapTypeId: gm.MapTypeId.TERRAIN
    };

    var ${location.mapName} = new gm.Map(document.getElementById("${location.mapName}"), options_${location.mapName});

    var marker_${location.mapName} = new gm.Marker({
        title: "${location.name}",
        position: latLng_${location.mapName},
        map: ${location.mapName}
    });
</c:forEach>

迭代生成地图对象，标记等等，如下所示：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

<script type="text/javascript">
    var gm = google.maps;
    function initialize() {
    <c:forEach var="location" items="${locations}">
        var latLng_${location.mapName} = new gm.LatLng(${location.lat}, ${location.lng});
        var options_${location.mapName} = {
            zoom: 14,
            center: latLng_${location.mapName},
            mapTypeId: gm.MapTypeId.TERRAIN
        };

        var ${location.mapName} = new gm.Map(document.getElementById("${location.mapName}"), options_${location.mapName});

        var marker_${location.mapName} = new gm.Marker({
            title: "${location.name}",
            position: latLng_${location.mapName},
            map: ${location.mapName}
        });
    </c:forEach>
    }

    gm.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<c:forEach var="location" items="${locations}">
    <h5>${location.name}</h5>
    <div id="${location.mapName}" style="height: 180px; width: 400px;"></div>
</c:forEach>
</body>
</html>

如果您愿意，可以将其括在一个函数中。在测试中，我生成了4张地图，如下图所示：

Test with multiple maps

这是整个JSP：

\r\n

Answer 2

实现您想要的目标的关键是要意识到您需要声明多个上下文/选项集，每个映射一个。我个人的方法是定义一个初始化函数，它将你的值作为参数，如下所示：

$ diff <(bundle exec ruby -e 'puts $:') <(bundle exec ruby -Ilib -e 'puts $:') | grep 'puppet-'
< /Library/Ruby/Gems/2.0.0/gems/puppet-3.7.5/lib

Answer 3

尝试这个解决方案：3 ...我希望这有帮助。

<script>
function insertMarker(lat, lng, mapname){
var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng(lat, lng),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
    "map_"+ mapname = new google.maps.Map(document.getElementById(mapname),
                                myOptions);    
}
}
</script>

<c:forEach var="location" items="${locations}">

    <div id="item">
          <h1>${location.name}</h1>
          <div id="${location.mapName}"></div>      
    </div>
    <script>
         insertMarker(0.0, 0.0, "<%=location.mapName%>");
    </script>
</c:forEach>

如何在一个页面上显示多个自定义谷歌地图？

3 个答案: