如何使用jsp中的数据填充js数组

时间:2012-03-13 23:27:21

标签: javascript google-maps google-maps-api-3

我正试图用jsp中的coords填充LatLng,但我是js中的新手。 你能给我一些提示吗:)?

我在我的jsp google maps api v3中显示地图并绘制简单路径

<script type="text/javascript">

function initialize() {
  var myLatLng = new google.maps.LatLng(0, -180);
  var myOptions = {
    zoom: 3,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);

  var flightPlanCoordinates = [
                                new google.maps.LatLng(37.772323, -122.214897),
                                new google.maps.LatLng(21.291982, -157.821856),
                                new google.maps.LatLng(-18.142599, 178.431),
                                new google.maps.LatLng(-27.46758, 153.027892)
                              ];

  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?xxx&sensor=false&callback=initialize";
document.body.appendChild(script);
}

window.onload = loadScript;

</script>

下面我从我的控制器获取坐标

<c:forEach items="${trackpoints}" var="coord">
<div>lat = ${coord.latitude}, lon = ${coord.longitude}</div>
</c:forEach>

现在我想用谷歌地图api替换硬编码的flightPlanCoordinates来自“trackpoints”

我花了几个小时但没有运气; /

1 个答案:

答案 0 :(得分:2)

您是否尝试过在数组构造函数中将它们打印出来?

var flightPlanCoordinates = [<c:forEach items="${trackpoints}" var="coord">
    new google.maps.LatLng(${coord.latitude}, ${coord.longitude}),
    </c:forEach>];

请记住:JavaScript直到浏览器才会执行,因此您可以动态生成它。你需要弄清楚如何省略最后的,,因为这会弄乱IE