[JSP] Uzycie zmiennych w JavaScript

0

Hej!

Czy ktos moglby mi wyjasnic jak uzyc zmiennych odczytanych w jsp z bazy danych do javascript? chodzi dokladnie o dodanie markerow w google maps api (javascript), ktorych pozycje zapisane mam w bazie danych i odczytuje je np tak (do wysiwetlenia na stronie):

<?xml version="1.0" encoding="UTF-8"?>
<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" language="java" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="t" %>
<%@page import="servlet.database.SimpleDAO"%>
<link type="text/css" rel="stylesheet" href="css/nowy.css"/>
<META HTTP-EQUIV="Refresh" CONTENT="3">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<%

			pageContext.setAttribute("info","");
	
			try{
					pageContext.setAttribute("data", SimpleDAO.getLatLon());
	
			} catch(Exception e) {
				pageContext.setAttribute("info","<div class='error'>Wystąpił błąd: <br/><i>"+e.getLocalizedMessage()+"</i></div>");
			}	
%>
<html>
<head>
	<%@ include file="/WEB-INF/includes/header.jspf" %>
	
	<title>Witaj</title>
</head>

<body>
<h3>Witamy w servlecie</h3>

</br>
	
			<table id="tabela1" class="pac1">
			 	
				<tbody>
				  	<c:forEach var="row" items="${data}" varStatus="loopStatus" >
				  
				  	
		    		<tr class="${loopStatus.index % 2 == 0 ? 'pierwszy' : 'drugi'}" >
		    			<td>${row[0]}</td>
		    			<td>${row[1]}</td>
		    							    </tr>
				    </c:forEach>
				</tbody>
			</table>
		

	${info}
</body>
</html>

i wyswietlam zmienne w postaci dlugosci i szerokosci geograficznej w tablicy. chodzi teraz o to aby tych zmiennych uzyc w javacode do dodania markerow. Na przyklad uzywajac kodu ze strony www.gmapsapi.com:


<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body onload="mapaStart()">      
		<script type="text/javascript">   
		<!-- 
			var mapa; // obiekt globalny
			
			function dodajMarker(lat,lon,opcjeMarkera)
			{
				// tworzymy marker z współrzędnymi i opcjami z argumentów funkcji dodajMarker
				opcjeMarkera.position = new google.maps.LatLng(lat,lon);
				
				opcjeMarkera.map = mapa; // obiekt mapa jest obiektem globalnym!
				var marker = new google.maps.Marker(opcjeMarkera);
			}
			
			function mapaStart()  
			{  
				var opcjeMapy = 
				{
					center: new google.maps.LatLng(53.41935400090768,14.58160400390625),
					zoom: 10,
					mapTypeId: google.maps.MapTypeId.SATELLITE
				}
				mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy); 
				
				// ten marker będzie przesuwalny			
				dodajMarker(53.400,14.700,{title: 'Przeciągnij mnie', draggable: true});  
				
				// ten marker nie będzie klikalny
				dodajMarker(53.400,14.600,{title: 'Jestem nieklikalny', clickable: false});  
				
				
			}  
		-->
		</script>   
		<div id="mapka" style="width: 700px; height: 500px; border: 1px solid black; background: gray;">   
		<!-- tu będzie mapa -->   
		</div>   
		<p id="info">
			Oto pierwsza mapa, stworzona za pomocą Google Maps API v3
		</p>
		
</body>
</html>

czyli dokladnie aby w funkcji

dodajMarker(53.400,14.700,{title: 'Przeciągnij mnie', draggable: true});

uzyc moich odczytanych danych z bazy. oczywiscie w petli ;)

z gory dziekuje za pomoc
pzdr

0

Nie dostaniesz sie do tych wartosci, bo one sa dostepne na serwerze, a JavaScript wykonuje sie po stronie klienta. Mozesz to zrobic na szybko, przy pomocy scriptletu:

<script type="text/javascript">
	function setMarkers() {
		<%
			for(String[] row : SimpleDAO.getLatLon()) {
				out.println(String.format("dodajMarker(%s, %s, {title: 'Marker'});", row[0], row[1]));
			}
		%>
	}
</script>

Albo mozesz zrobic to poprawnie i napisac servlet, ktory bedzie zwracal np. JSON'a ze wspolrzednymi, a Twoja strona grzecznie o nie zapyta AJAX'em.

0

Dzieki za podpowiedz ws, bardzo sprytne rozwiazanie!

generalnie wydaje mi sie, ze wszystko powstawialem wlasciwie ale niestety nie dziala, Twoj servlet umiescilem bezposrednio w metodzie ladujacej mape przy starcie:

<body onload="mapaStart()">      
		<script type="text/javascript">   
		
			var mapa; // obiekt globalny
			
			function dodajMarker(lat,lon,opcjeMarkera)
			{
				// tworzymy marker z współrzędnymi i opcjami z argumentów funkcji dodajMarker
				opcjeMarkera.position = new google.maps.LatLng(lat,lon);
				
				opcjeMarkera.map = mapa; // obiekt mapa jest obiektem globalnym!
				var marker = new google.maps.Marker(opcjeMarkera);
			}
			
			function mapaStart()  
			{  
				var opcjeMapy = 
				{
					center: new google.maps.LatLng(51.201140,17.202170),
					zoom: 10,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy); 

				function setMarkers()
				{
					<%
						for(String[] row : SimpleDAO.getTimestamp()){ 
							out.println(String.format("dodajMarker(%s,%s, {title: 'Marker'});", row[0], row[1]));
						}
					%>
				}
				
			
			}  
		 
		</script>   
		<div id="mapka" style="width: 700px; height: 500px; border: 1px solid black; background: gray;">  

....

natomiast w klasie SimpleDAO metoda getTimeStamp() jest taka:


static final String pytTime2 = "SELECT lat, lon from koordynaty";

static public String[][] getTimestamp() {
		return executeQuery(pytTime2);
	}

co tu nie gra?

raz jeszcze dzieki za pomoc!

0

dobra, nie bylo pytania. oczywisty blad, az wstyd:P

dzieki za pomoc ws!
[browar]

0

Witam,

czy ktoś mógłby zamieścić poprawne rozwiązanie powyższego zagadnienia, gdyż również mam ten sam problem ;/

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto