Fatal编程技术网
  • java/
  • Java 如何在每次请求后放置谷歌地图标记

Java 如何在每次请求后放置谷歌地图标记

java google-maps jsp servlets google-maps-api-3

Java 如何在每次请求后放置谷歌地图标记,java,google-maps,jsp,servlets,google-maps-api-3,Java,Google Maps,Jsp,Servlets,Google Maps Api 3,我有一个简单的web应用程序，上面有JSP页面和表单。它将带有“ID”标记的请求发送到servlet。Servlet将这个ID查询到MySQL数据库，并返回一个用于在地图上创建标记的地址 我想要我的申请： 在地图上的每个请求之后显示所有标记 删除其中一个或所有人的机会 但现在我所拥有的只是更新页面和一个标记 我将感谢你的帮助 以下是一个jsp页面： <%@ page contentType="text/html;charset=UTF-8" language="java" %> &l

我有一个简单的web应用程序，上面有JSP页面和表单。它将带有“ID”标记的请求发送到servlet。Servlet将这个ID查询到MySQL数据库，并返回一个用于在地图上创建标记的地址

我想要我的申请：

  • 在地图上的每个请求之后显示所有标记
  • 删除其中一个或所有人的机会
    • 但现在我所拥有的只是更新页面和一个标记

    我将感谢你的帮助

    以下是一个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>

    
谷歌地图地理编码演示
身份证件
地址：
${Street\u char}${Street\u name}，${Street\u adr}，${Flat\u number}楼层${floor}
测试
${test}

    
var address=“${address}”；
var map=new google.maps.map（document.getElementById（'map'）{
mapTypeId:google.maps.mapTypeId.ROADMAP，
缩放：18
});
var geocoder=new google.maps.geocoder（）；
geocoder.geocode（{'address'：address}，
功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）{
var marker=new google.maps.marker({
位置：结果[0]。geometry.location，
地图：地图，
标题：“乌卢鲁试验”
});
var infowindow=new google.maps.infowindow（）；
新的google.maps.event.addListener（标记，'mouseover'，（函数（标记）{
//新的google.maps.event.addListener（标记，'click'，（函数（标记）{
返回函数（）{
var内容=地址；
infowindow.setContent（“”+“测试”+”“+content+”）；
信息窗口。打开（地图、标记）；
}
})（标记）；
map.setCenter（结果[0].geometry.location）；
}
否则{
//谷歌无法对此请求进行地理编码。请妥善处理。
}
});
    下面是servlet：

    @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();
            }
        }
    }
}

    @WebServlet（name=“Servlet”，value=“/qwe”）
公共类Servlet扩展了HttpServlet{
静态最终字符串JDBC_DRIVER=“com.mysql.JDBC.DRIVER”；
私有静态最终字符串URL=“jdbc:mysql://localhost:3306/web";
私有静态最终字符串USERNAME=“root”；
私有静态最终字符串PASSWORD=“root”；
连接；
编制报表编制报表；
变量=新变量（）；
变量adr=新变量（Variables.getStreet_char（）、Variables.getStreet_name（）、Variables.getStreet_adr（））；
String Select_addr=“Select*FROM client，其中id=？；”；
@凌驾
受保护的void doGet（HttpServletRequest-req，HttpServletResponse-resp）抛出ServletException，IOException{
int id_jsp=Integer.parseInt（req.getParameter（“id”）；
试一试{
Class.forName（“com.mysql.jdbc.Driver”）；
connection=DriverManager.getConnection（URL、用户名、密码）；
preparedStatement=connection.prepareStatement（选择地址）；
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（“姓氏”）；
variables.setStreet_char（resultSet.getString（“Street_char”）；
variables.setStreet_name（resultSet.getString（“Street_name”））；
变量.setStreet_adr（resultSet.getString（“Street_adr”））；
变量.setFlat_number（resultSet.getInt（“Flat_number”）；
变量.setFloor（resultSet.getInt（“Floor”）；
}
相应的setContentType（“text/html；charset=utf-8”）；
PrintWriter out=resp.getWriter（）；
println（“ID:+ID\u jsp+”
    ”；
字符串adr=”“+变量。getStreet\u char（）+“”+变量。getStreet\u name（）
+“，”+变量。getStreet_adr（）+”；
要求设置属性（“测试”，adr）；
setAttribute（“Name”，variables.getName（））；
req.setAttribute（“姓氏”，variables.getLastname（））；
req.setAttribute（“Street_char”，variables.getStreet_char（））；
req.setAttribute（“Street_name”，variables.getStreet_name（））；
请求setAttribute（“Street_adr”，variables.getStreet_adr（））；
req.setAttribute（“Flat_number”，variables.getFlat_number（））；
setAttribute（“Floor”，variables.getFloor（））；
请求设置属性（“地址”，adr）；
req.getRequestDispatcher（“mypage.jsp”）.forward（req，resp）；
系统输出打印（adr）；
//out.close（）；
resultSet.close（）；
preparedStatement.close（）；
connection.close（）；
}捕获（SQLSE异常）{
se.printStackTrace（）；
}捕获（例外e）{
e、 printStackTrace（）；
}最后{
试一试{
if（preparedStatement！=null）
preparedStatement.close（）；
}捕获（SQLException se2）{
se2.printStackTrace（）；
}
试一试{
if（连接！=null）
connection.close（）；
}捕获（SQLSE异常）{
se.printStackTrace（）；
}
}
}
}
    希望每个请求只设置一个地址。相反，您可以尝试获取所有地址并将其作为json数组发送给jsp

    在下面的示例中，我使用了
    城市、国家
    进行标记< 
    [{city: "Manhattan",country:"United States",state:"Manhattan"},
{city:"Newark",country:"United States",state:"Newark"}]

    <script type="text/javascript">

    var map;
    // Creates the map
    function initialize() {
      map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(40.77627, -73.910965), //For Newyork
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
    }

    // This function takes an array argument containing a list of marker data
    function generateMarkers(locations) {
    //alert(locations);
      for (var i = 0; i < locations.length; i++) {

        new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map,
          title: locations[i][0]
        });
      }
    }

</script>

    <div id="map" style="width:500px; height:250px;;padding-top:0px;margin:25px 50px 25px 55px;"></div>

    <script type="text/javascript">

        window.onload = function () {
            initialize();
            var d = $.ajax({
                type: "POST",
                url: "servletURL",
                cache: false,
                async: false
            }).responseText;
            var loc2 = [];
            var locations1 = "";
            if(d.length != 0) {
                var obj = jQuery.parseJSON(d);
                $.each(obj, function(key,row) {
                    //alert(row.city + "," + row.country);
                    var address = row.city + "," +row.country;
                    geocoder = new google.maps.Geocoder();
                    geocoder.geocode( { 'address': address}, function(results, status) {
                      if (status == google.maps.GeocoderStatus.OK) {
                        loc2.push("['" + row.city + "'," + results[0].geometry.location.lat() + "," + results[0].geometry.location.lng() +"]");
                        locations1 = "[" + loc2 + "]";
                        generateMarkers(eval(locations1));
                      } 
                      else {
                        alert("Geocode was not successful for the following reason: " + status);
                      }
                    });
                }); 
            }
        };
      </script>
</div>

    public List<GoogleMapHelper> getAddressForGoogleMap() {
    String sql = "Select city, state, country FROM dbo.Customerdetails ";
    SQLQuery query = getSession().createSQLQuery(sql);
    query.setResultTransformer(Criteria.ALIAS_TO_ENTITY_MAP);
    List data = query.list();
    List<GoogleMapHelper> address = new ArrayList<GoogleMapHelper>();
    for (Object object : data) {
        GoogleMapHelper googleHelper = new GoogleMapHelper();
        Map row = (Map) object;
        googleHelper.setCity(row.get("city").toString());
        googleHelper.setState(row.get("state").toString());
        googleHelper.setCountry(row.get("country").toString());
        address.add(googleHelper);
    }
    return address;
}

    public class GoogleMapHelper {

    private String city;

    private String state;

    private String country;

    (getters and setters)

}