我正在使用Java EE开发Web应用程序,并且我希望使用数据库中的坐标将标记动态地添加到放置在JSP页面上的Google地图中。我有以下代码,但无法查明问题
<%@ 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" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<!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" />
<style type="text/css">
html, body{
height:100%;
margin: 0;
padding: 0;
}
#map_canvas{
height:700px;
width: 700px;
}
#map-canvas { height: 100% }
</style>
<sql:setDataSource var="enterdata"
driver="com.mysql.jdbc.Driver"
user="root" password="root"
url="jdbc:mysql://localhost/google_maps" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js? sensor=false"></script>
<script type="text/javascript">
var markers = [
<c:forEach var="s" items="${list.rows}">
[<c:out value="${s.latitude}"/>,<c:out value="${s.longitude}"/>]
</c:forEach> ];
function initialize(){
var latlng = new google.maps.LatLng(markers[0][1],markers[0][2]);
var mapOptions={
zoom: 6, // 0 à 21
center: new google.maps.LatLng(36,5), // centre de la carte
mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID, TERRAIN
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<sql:query var = "users" dataSource="${dataSource}">
select longitude,latitude from map
</sql:query>
<p class="info">${ message }</p>
</body>
</html>
如果我对这部分的理解正确的话
var markers = [
<c:forEach var="s" items="${list.rows}">
[<c:out value="${s.latitude}"/>,<c:out value="${s.longitude}"/>]
</c:forEach>
输出数组中只有2个字段。在这种情况下,用于创建LatLng
的索引是错误的,应更改为使用0和1:
position: new google.maps.LatLng(markers[i][0], markers[i][1]),
否则,您还必须包括信息窗口内容的信息。
cout
后缺少逗号。这是正确处理阵列所必需的。在c:forEach
循环中以创建标记,在之后添加逗号:
value="${s.longitude}"/>],
另外,如上所述,另一个问题是markers[i][0]
和markers[i][1]
。