谷歌地图中的叠加层存在问题。
问题是我使用数据库中的纬度和经度来显示叠加层 但它没有显示叠加
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*" %>
<%
Connection connection = null;
boolean foundResults = false;
ResultSet set = null;
Statement statement = null;
String lat=null;
String lng=null;
%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize()
{
var myLatLng = new google.maps.LatLng(18.9, 72.8);
var myOptions = {
zoom: 11,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
see();
}
function see()
{
<%
int count=0;
try
{
Class.forName("org.postgresql.Driver");
connection = DriverManager.getConnection("jdbc:postgresql://localhost:5432/postgres","postgres", "password");
statement = connection.createStatement();
set = statement.executeQuery("SELECT count(lat) from latng");
while(set.next())
{
count = set.getInt(1);
}
}
catch(Exception e)
{
}
%>
var locations = new Array(<%= count%>);
for(i = 0; i < locations.length; i++)
{
locations[i] = new Array(<%= count%>);
}
<%
int i=0;
try
{
Class.forName("org.postgresql.Driver");
connection = DriverManager.getConnection("jdbc:postgresql://localhost:5432/postgres","postgres", "password");
statement = connection.createStatement();
set = statement.executeQuery("SELECT lat, lng FROM latng");
while(set.next())
{
lat=set.getString(1);
lng=set.getString(2);
%>
locations[<%= i %>][0]=<%= lat%>;
locations[<%= i %>][1]=<%= lng%>;
<%
i++;
}
%>
var i;
var infowindow = new google.maps.InfoWindow();
var marker;
for (i = 0; i < locations.length; i++)
{
marker = new google.maps.Marker({position: new google.maps.LatLng(locations[i][0],locations[i][1]),map: map});
var flightPlanCoordinates=[new google.maps.LatLng(locations[i][0],locations[i][1])];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
<%
}
catch(Exception e)
{
}
%>
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width=100%; height:80%"></div>
</body>
</html>
谢谢，请帮助我...............
答案 0 :(得分：2)
好的，目前还没有完整的答案，但我开始有一个工作的事情：
（通常没有JSP代码）
检查一下，如果在您的方案中这是一个有问题的情况，请回馈我。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize()
{
var myLatLng = new google.maps.LatLng(18.9, 72.8);
var myOptions = {
zoom: 11,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
see();
}
function see()
{
var locations = new Array(3); //(<%= count%>);
for(i = 0; i < locations.length; i++)
{
locations[i] = new Array(2); //This one is wrong!! (<%= count%>);
}
for(i = 0; i < locations.length; i++) {
locations[i][0]=18.9 + i/100;
locations[i][1]=72.8 + i/100;
}
var i;
var infowindow = new google.maps.InfoWindow();
var marker;
for (i = 0; i < locations.length; i++)
{
marker = new google.maps.Marker({position: new google.maps.LatLng(locations[i][0],locations[i][1]),map: map});
var flightPlanCoordinates=[new google.maps.LatLng(locations[i][0],locations[i][1])];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width=100%; height:80%"></div>
</body>
</html
答案 1 :(得分：2)
以下是JSFiddle Demo：
首先，我们创建一个全局变量来保存折线点：
var flightPlanCoordinates = []; //global array to track our Lat Lng needed to plot the polyline
您遇到的问题是您没有为折线提供多个Lat Lng。所以，基本上，它不是绘制折线，因为它只有一个Lat Lng来创建它。您需要多个Lat Lng来创建某种类型的线。因此，我们创建了一个名为flightPlanCoordinates的全局数组来跟踪折线的Lat Lng，并在for循环中将Lat Lng的位置推送到它。在for循环结束后，我们创建折线覆盖并使用当前地图设置它：
function see() {
var locations = new Array(3); //(<%= count%>);
for (i = 0; i < locations.length; i++) {
locations[i] = new Array(2); //This one is wrong!! (<%= count%>);
}
for (i = 0; i < locations.length; i++) {
locations[i][0] = 18.9 + i / 100;
locations[i][1] = 72.8 + i / 100;
}
var i;
var infowindow = new google.maps.InfoWindow();
var marker;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map
});
//pushing Lat Lng to use to create polyline
flightPlanCoordinates.push(new google.maps.LatLng(locations[i][0], locations[i][1]));
}
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
进一步说明，您的信息窗口实际上没有任何显示内容。没有点击事件关联w /标记打开它。