-2
こんにちは、私は地図にマーカーを追加したいと思います。私はマーカを追加するためにデータベースのテーブルから経度と緯度を取得する必要があります。Mysqlから変数を取得し、それをJSの関数で使用する方法は?
1-私は地図を表示するためにjavascriptを使用しました(Googleマップ)。
var map;
var initialize;
initialize = function(){
var latLng = new google.maps.LatLng(x,y);
var myOptions = {
zoom : 14,
center : latLng,
mapTypeId : google.maps.MapTypeId.TERRAIN,
maxZoom : 20
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
var marker = new google.maps.Marker({
position : latLng,
map : map,
title : "sousse"
//icon : "marker_sousse.gif"
});
2 - 私は、データベースの緯度と経度を取得し、私はJavaを使用して2つの文字列のリストにそれを入れて:
package beans;
import .
.
.
.
.
@ManagedBean(name = "js")
@RequestScoped
public class Map {
ArrayList<String> Listlat = new ArrayList<String>();
ArrayList<String> Listlng = new ArrayList<String>();
GestionAnalyseLocal m;
ResultSet resultSet;
public Map() {
try {
Class.forName("com.mysql.jdbc.Driver");
Connection connect = DriverManager.getConnection("jdbc:mysql://localhost:3306/pfedb", "root", "");
Statement statement = connect.createStatement();
resultSet = statement.executeQuery("select * from t_analyse");
} catch (Exception e) {
System.out.println("erreur" + e);
e.printStackTrace();
}
}
public ArrayList<String> ExtractLat(ResultSet rs) {
try {
while (rs.next()) {
Listlat.add(rs.getString("latitude"));
}
} catch (Exception e) {
System.out.println("erreur" + e);
e.printStackTrace();
}
return Listlat;
}
public ArrayList<String> ExtractLng(ResultSet rs) {
try {
while (rs.next()) {
Listlng.add(rs.getString("Longitude"));
}
} catch (Exception e) {
System.out.println("erreur" + e);
e.printStackTrace();
}
return Listlng;
}
}
3 - 私は見つけることが今したいです私は2つのリストとjs関数のxとyを置き換えることができますソリューション...これはhtmlページです:
<!DOCTYPE html>
<html >
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:p="http://primefaces.org/ui"
template="/WEB-INF/template/template.xhtml"
>
<ui:define name="title">Map</ui:define>
<ui:define name="content">
<head>
<link rel="stylesheet" href="jquery-ui-1.8.12.custom.css" type="text/css" />
</head>
<style type="text/css">
#container{position:relative;width:990px;margin:auto;}
#container #map{width:500px;height:500px;margin:auto;}
</style>
<body>
<div id="container">
<div id="map">
<p>Veuillez patienter pendant le chargement de la carte...</p>
</div>
</div>
<!-- Include Javascript -->
<script type="text/javascript" src="resources/js/jquery.min.js"></script>
<script type="text/javascript" src="resources/js/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="resources/js/functions.js"></script>
</body>
</ui:define>
</ui:composition>
</html>
ちょうどノート:Javascriptのに慣れていないイム:/