Question

大家好我想在地图中添加标记。我应该从数据库中的表中检索经度和纬度以添加标记。

1-我用javascript来显示地图（谷歌地图）。

    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-我为数据库检索Longitude和Latitude，并使用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-我现在想找到一个解决方案，我可以用两个列表替换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：/

Answer 1

您可以使用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。

希望它有所帮助。

如何从Mysql中检索变量并在JS中的函数中使用它？

1 个答案: