javascript - 如何在 jSTL + javascript 中使用 foreach？

Question

我尝试在 Google map 中添加图钉。我收集了带有坐标和名称的 ${list} 项目。我想要放入 map 中的每个项目。我写了一些代码:

<script>
function initMap() {
<c:forEach items="${list}" var="item">
    var cairo = {lat: ${item.geometry.lat}, lng: ${item.geometry.lng}};
    var map = new google.maps.Map(document.getElementById('map'), {
        scaleControl: true,
        center: cairo,
        zoom: 10
    });
    var infowindow = new google.maps.InfoWindow;
    infowindow.setContent('${item.name}');
</c:forEach>
}

但是我的代码不能正常工作。这在 map 中仅添加了集合中的一个(最后一个)项目。

请帮忙。

Answer 1

您可能需要创建一个标记点​​来映射

function initMap() {

var cairo =new google.maps.LatLng(38.54,77.02); 

var map = new google.maps.Map(document.getElementById('map'), {
    scaleControl: true,
    center: cairo,
    zoom: 10
});

<c:forEach items="${list}" var="item">

var infowindow = new google.maps.InfoWindow;

infowindow.setContent('${item.name}');

var myLatlng = new google.maps.LatLng(${item.geometry.lat}, ${item.geometry.lng});

 var marker = new google.maps.Marker({
    position : myLatlng,
    map : map,
    icon : 'img/icon.png' 
    title:${item.name}
   }); 
   google.maps.event.addListener(marker, 'click', function() {  
    // map.setZoom(15);  
    // map.setCenter(marker.getPosition());  
     infowindow.open(map, marker);  
    });  
  </c:forEach>

 }