java如何在每次请求后放置Google Maps标记

4 月 Questions & Answers 1018

我有一个简单的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>

以下是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();
            }
        }
    }
}

Tags:

共 (1) 个答案

# 1 楼答案

希望每个请求只设置一个地址。相反，您可以尝试获取所有地址，并将其作为json数组发送给jsp

在下面的示例中，我使用了City, Country进行标记。我的json数组如下所示：

[{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>

这里我使用ajax加载地图。如果json包含的数据可能与上述类似，则可以使用此函数生成多个标记

<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>

查看生成的带有多个标记的输出

对于删除标记，我建议您更新json并再次加载。希望这有帮助

更新：

这就是我的业务逻辑获取数据的方式。我在用Spring & Hibernate。我正在使用jacksonjar文件。它将java对象转换为json。你也可以使用Gson

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;
}

而我的GoogleMapHelper只不过是一门POJO课

public class GoogleMapHelper {

    private String city;

    private String state;

    private String country;

    (getters and setters)

}

Python中文网

有 Java 编程相关的问题?

java如何在每次请求后放置Google Maps标记

共 (1) 个答案

# 1 楼答案