2016-04-08 1 views
-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のに慣れていないイム:/

答えて

0

あなたは簡単な方法であることを行うにはjQueryとAJAXを使用することができます。 おそらく、緯度と経度の両方を返すメソッドを作成する必要があります。たとえば :

$(document).ready(function(evt){ 
    $.get('/url/to/get/coords', function(response){ 
     initialize(response.longitude, response.latitude); 
    }); 
}); 

あなたはあなたの新しい方法がJSON形式で応答を返すことを確認し、このようなあなたの初期化関数を変更する必要があります。

initialize = function(x,y){ your code } 

がCOORDSを渡します。

希望します。

関連する問題