JSPページとフォームを使用した簡単なWebアプリケーションがあります。 "ID"タグ付きの要求をサーブレットに送信します。サーブレットはこのIDをMySQL DBに照会し、マップ上にマーカーを作成するために使用されるアドレスを返します。リクエストごとにGoogleマップマーカーを配置する方法
- は、地図上の各要求後にすべてのマーカーを表示する
私は自分のアプリケーションがしたいですページを更新し、1つのマーカーのみを更新します。
私は助けていただきありがとうございます!ここで
は、JSPページである:ここ
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-16"/>
<title>Google Maps Geocoding Demo</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<form action="qwe" method="get">
<table>
<tr>
<td align="left"> ID</td>
<td><input type="text" name="id"></td>
</tr>
<tr>
<td><input type="submit" value="Send"></td>
</tr>
<tr>
<td>Adress:</td>
<td>${Street_char} ${Street_name},${Street_adr}, ${Flat_number} floor ${Floor}</td>
</tr>
<tr>
<td>test</td>
<td>${test}</td>
</tr>
</table>
</form>
<br>
<div id="map" style="width: 400px; height: 400px;"></div>
<script type="text/javascript">
var address = "${address}";
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 18
});
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': address},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: 'Uluru-Test'
});
var infowindow = new google.maps.InfoWindow();
new google.maps.event.addListener(marker, 'mouseover', (function (marker) {
// new google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
var content = address;
infowindow.setContent('<div><strong>' + 'test' + '</strong><br>' + content + '</div>');
infowindow.open(map, marker);
}
})(marker));
map.setCenter(results[0].geometry.location);
}
else {
// Google couldn't geocode this request. Handle appropriately.
}
});
</script>
</body>
</html>
はサーブレットです:
@WebServlet(name = "Servlet", value = "/qwe")
public class Servlet extends HttpServlet {
static final String JDBC_DRIVER = "com.mysql.jdbc.Driver";
private static final String URL = "jdbc:mysql://localhost:3306/web";
private static final String USERNAME = "root";
private static final String PASSWORD = "root";
Connection connection;
PreparedStatement preparedStatement;
Variables variables = new Variables();
Variables adr = new Variables(variables.getStreet_char(), variables.getStreet_name(), variables.getStreet_adr());
String Select_addr = "SELECT * FROM client WHERE id=?;";
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
int id_jsp = Integer.parseInt(req.getParameter("id"));
try {
Class.forName("com.mysql.jdbc.Driver");
connection = DriverManager.getConnection(URL, USERNAME, PASSWORD);
preparedStatement = connection.prepareStatement(Select_addr);
preparedStatement.setInt(1, id_jsp);
ResultSet resultSet = preparedStatement.executeQuery();
while (resultSet.next()) {
variables.setId(resultSet.getInt("id"));
variables.setName(resultSet.getString("Name"));
variables.setSurname(resultSet.getString("Surname"));
variables.setStreet_char(resultSet.getString("Street_char"));
variables.setStreet_name(resultSet.getString("Street_name"));
variables.setStreet_adr(resultSet.getString("Street_adr"));
variables.setFlat_number(resultSet.getInt("Flat_number"));
variables.setFloor(resultSet.getInt("Floor"));
}
resp.setContentType("text/html;charset=utf-8");
PrintWriter out = resp.getWriter();
out.println("ID: " + id_jsp + "<br>");
String adr = "" + variables.getStreet_char() + " " + variables.getStreet_name()
+ "," + variables.getStreet_adr() + "";
req.setAttribute("test", adr);
req.setAttribute("Name", variables.getName());
req.setAttribute("Surname", variables.getSurname());
req.setAttribute("Street_char", variables.getStreet_char());
req.setAttribute("Street_name", variables.getStreet_name());
req.setAttribute("Street_adr", variables.getStreet_adr());
req.setAttribute("Flat_number", variables.getFlat_number());
req.setAttribute("Floor", variables.getFloor());
req.setAttribute("address", adr);
req.getRequestDispatcher("mypage.jsp").forward(req, resp);
System.out.println(adr);
// out.close();
resultSet.close();
preparedStatement.close();
connection.close();
} catch (SQLException se) {
se.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (preparedStatement != null)
preparedStatement.close();
} catch (SQLException se2) {
se2.printStackTrace();
}
try {
if (connection != null)
connection.close();
} catch (SQLException se) {
se.printStackTrace();
}
}
}
}
は、これを実現するには、2つの方法があります。 1.サーブレットでのセッションの使用すべてのアドレスをリストに追加し、リストをセッションに入れる必要があります。 JSPでは、セッションのアドレスリストを繰り返し、複数のマーカーを追加します。 2. Ajax Wayボタンをクリックすると、Ajaxリクエストを送信し、JSONとしてAddressを取得し、JSONを使用してマーカーを追加します。 – JChap
JChap、第2の方法を具体化する方法。AjaxなしのJSONがわからないため、いくつかの例を示してください。私は各ボタンをクリックしてアドレスを送信した後にマーカーを追加したい。 – pavlo