如何在 JSTL 和 Javascript 中加载谷歌地图上的所有标记答案

【问题标题】：How to load all marker on google map in JSTL and Javascript如何在 JSTL 和 Javascript 中加载谷歌地图上的所有标记
【发布时间】：2017-07-19 23:31:05
【问题描述】：

我正在使用 GoogleMap 通过 JSTL 和 Javascript 获取所有标记。在我的服务和存储库层中，我可以获得所有纬度和经度。但是当从谷歌地图获取时，我只得到一个纬度和经度。

我的来源：

<div id="map_canvas" style="height: 680px;"></div>
    <script>    
    function initMap() {
    <c:forEach var="item" items="${page.content}" varStatus="status">
        var latLng = new google.maps.LatLng(<c:out value="${item.map_lat}"/>, <c:out value="${item.map_maplong}"/>);                    
        var map = new google.maps.Map(document.getElementById('map_canvas'), {
         zoom: 16,
         center: latLng,
         mapTypeId: google.maps.MapTypeId.ROADMAP});
         var markerMap = new MarkerWithLabel({
         position: latLng,
         draggable: true,
         raiseOnDrag: false,
         map: map,
         labelContent: "Content display",
         labelAnchor: new google.maps.Point(30, 30),
         labelClass: "labels", // the CSS class for the label
         isClicked: false });

         var windowDialog = new google.maps.InfoWindow({
                               content: "content display dialog"                                            
                        });
        google.maps.event.addListener(markerMap, "click", function (e) { windowDialog.open(map, this); });                          
   </c:forEach>
}       
initMap();
</script>

如何通过JSTL循环获取GoogleMap上的所有标记，谢谢

【问题讨论】：

不要为每个标记创建新地图。
嗨@geocodezip：你能告诉我更多关于创建新标记的细节吗？

标签： javascript java google-maps jstl google-maps-markers

【解决方案1】：

不要为每个标记创建新地图。首先创建地图，在forEach 中添加每个标记，然后（可选）缩放地图并将其居中以显示所有标记。

<div id="map_canvas" style="height: 680px;"></div>
<script>    
function initMap() {
    // create the map
    var map = new google.maps.Map(document.getElementById('map_canvas'), {
     zoom: 16,
     // center: latLng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    // create a bounds object
    var bounds = new google.maps.LatLngBounds();
// for each marker do this
<c:forEach var="item" items="${page.content}" varStatus="status">
     var latLng = new google.maps.LatLng(<c:out value="${item.map_lat}"/>, <c:out value="${item.map_maplong}"/>);
     // include in the map bounds                    
     bounds.extend(latLng);
     var markerMap = new MarkerWithLabel({
       position: latLng,
       draggable: true,
       raiseOnDrag: false,
       map: map,
       labelContent: "Content display",
       labelAnchor: new google.maps.Point(30, 30),
       labelClass: "labels", // the CSS class for the label
       isClicked: false
     });

     var windowDialog = new google.maps.InfoWindow({
                           content: "content display dialog"                                            
     });
     google.maps.event.addListener(markerMap, "click", function (e) {
       windowDialog.open(map, this); 
     });                          
</c:forEach>
   // center and zoom map to fit the markers
   map.fitBounds(bounds);
}       
initMap();
</script>

【讨论】：