2016-03-21 17 views
0

JSPページとフォームを使用した簡単なWebアプリケーションがあります。 "ID"タグ付きの要求をサーブレットに送信します。サーブレットはこのIDをMySQL DBに照会し、マップ上にマーカーを作成するために使用されるアドレスを返します。リクエストごとにGoogleマップマーカーを配置する方法

  1. は、地図上の各要求後にすべてのマーカーを表示する

  • それらの上で、削除する機会や、誰もが持っている。しかし、今、私が持っているすべては、次のとおりです。

    私は自分のアプリケーションがしたいですページを更新し、1つのマーカーのみを更新します。

    私は助けていただきありがとうございます!ここで

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

    はサーブレットです:

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

    は、これを実現するには、2つの方法があります。 1.サーブレットでのセッションの使用すべてのアドレスをリストに追加し、リストをセッションに入れる必要があります。 JSPでは、セッションのアドレスリストを繰り返し、複数のマーカーを追加します。 2. Ajax Wayボタンをクリックすると、Ajaxリクエストを送信し、JSONとしてAddressを取得し、JSONを使用してマーカーを追加します。 – JChap

    +0

    JChap、第2の方法を具体化する方法。AjaxなしのJSONがわからないため、いくつかの例を示してください。私は各ボタンをクリックしてアドレスを送信した後にマーカーを追加したい。 – pavlo

    答えて

    0

    がうまくいけば、要求ごとに1つのアドレスのみを設定しています。代わりに、すべてのアドレスをフェッチしてjson配列として作成し、jspに送信することができます。

    次のサンプルでは、​​マーキングにCity, Countryを使用しました。私のJSON配列は、私はロードマップのためのAJAXを使用しています。ここ

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

    、マーカーを開始し、生成するために私のスクリプトは、次のように

    [{city: "Manhattan",country:"United States",state:"Manhattan"}, 
    {city:"Newark",country:"United States",state:"Newark"}] 
    

    になります。 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> 
    

    Google map with multiple markers

    そしてについては、マーカーを削除する、複数のマーカーで生成された出力を参照してください、私はJSONを更新し、再びそれをロードするためにあなたをお勧めします。お役に立てれば。

    更新:

    これは私のビジネスロジックは、データをフェッチする方法です。私はSpring & Hibernateを使用しています。私はjackson jarファイルを使用しています。 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) 
    
    } 
    
    +0

    あなたの答えはVinoth Krishnanありがとうございました! このjson配列をクリック(増加)するたびに値を入力できますか?そうなら、それを行う方法? {city: "Manhattan"、国: "United States"、州: "Manhattan"}、 {都市: "Newark"、国: "アメリカ合衆国"、州: "Newark"}] ' 私はすべてのtogatherを削除する必要はありませんが、アドレスで選択(フォームにアドレスを入れてサーブレットに送信した後) – pavlo

    +0

    あなたのアドレスはどこから来ていますか? dbからのものであれば、各アドレスのフラグを保持します。表示するアドレスが1つ選択されていれば、それは真です。削除マークの場合はfalseです。さもなければ、それをセッションに格納しなければなりません。 –

    +0

    最初のdbテーブルはきれいですが、html形式のユーザーはこのような情報をdb: **の名前に付けます:** _Madison St_ **ストリートアドレス:** _75_ **都市:** _New York_ マップ上のサーブレットリターンマーカー。 ユーザーは次の情報を追加し、サーブレットは地図上にもう1つのマーカーを戻す必要があります。等々。ユーザーがマーカーを削除することに決めた場合、dbへのクエリーを要求し、サーブレットはこのマーカーを削除する必要がありますが、その他のマップは地図上に残る必要があります – pavlo

    関連する問題