春のMVC – IPアドレスを使用して場所を見つける(jQuery Google Map)
このチュートリアルでは、IPアドレスを使用して場所を検索する方法と、次のテクノロジを示します。
-
Spring MVCフレームワーク.
-
jQuery(Ajaxリクエスト).
-
GeoLiteデータベース.
-
グーグルマップ.
チュートリアルのフローを確認する
-
テキスト入力とボタンがあるページ.
-
IPアドレスを入力し、ボタンをクリックします.
-
jQueryはAjaxリクエストをSpring Controllerに送信します.
-
SpringコントローラのプロセスとJSON文字列を返します.
-
jQueryは返されたjsonを処理し、Google上に位置を表示します
地図。
1.プロジェクトディレクトリ
標準のMavenプロジェクトである、最終的なプロジェクトディレクトリ構造を見直してください。
プロジェクトの依存関係
Springのフレームワーク、Jackson、geoip-apiの依存関係を宣言します。
pom.xml
//... <properties> <spring.version>3.2.2.RELEASE</spring.version> <maxmind.geoip.version>1.2.10</maxmind.geoip.version> <jackson.version>1.9.10</jackson.version> </properties> <dependencies> <!-- Spring Core --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>${spring.version}</version> </dependency> <!-- need this for @Configuration --> <dependency> <groupId>cglib</groupId> <artifactId>cglib</artifactId> <version>2.2.2</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${spring.version}</version> </dependency> <!-- ip to server location --> <dependency> <groupId>com.maxmind.geoip</groupId> <artifactId>geoip-api</artifactId> <version>${maxmind.geoip.version}</version> </dependency> <!-- Jackson --> <dependency> <groupId>org.codehaus.jackson</groupId> <artifactId>jackson-mapper-asl</artifactId> <version>${jackson.version}</version> </dependency> </dependencies> //...
3. Spring MVC GeoLite
GeoLiteデータベースで場所を取得します。
ServerLocationBo.java
package com.mkyong.web.location; public interface ServerLocationBo { ServerLocation getLocation(String ipAddress); }
ServerLocationBoImpl.java
package com.mkyong.web.location; import java.io.IOException; import java.net.URL; import org.springframework.stereotype.Component; import com.maxmind.geoip.Location; import com.maxmind.geoip.LookupService; import com.maxmind.geoip.regionName; @Component public class ServerLocationBoImpl implements ServerLocationBo { @Override public ServerLocation getLocation(String ipAddress) { String dataFile = "location/GeoLiteCity.dat"; return getLocation(ipAddress, dataFile); } private ServerLocation getLocation(String ipAddress, String locationDataFile) { ServerLocation serverLocation = null; URL url = getClass().getClassLoader().getResource(locationDataFile); if (url == null) { System.err.println("location database is not found - " + locationDataFile); } else { try { serverLocation = new ServerLocation(); LookupService lookup = new LookupService(url.getPath(), LookupService.GEOIP__MEMORY__CACHE); Location locationServices = lookup.getLocation(ipAddress); serverLocation.setCountryCode(locationServices.countryCode); serverLocation.setCountryName(locationServices.countryName); serverLocation.setRegion(locationServices.region); serverLocation.setRegionName(regionName.regionNameByCode( locationServices.countryCode, locationServices.region)); serverLocation.setCity(locationServices.city); serverLocation.setPostalCode(locationServices.postalCode); serverLocation.setLatitude( String.valueOf(locationServices.latitude)); serverLocation.setLongitude( String.valueOf(locationServices.longitude)); } catch (IOException e) { System.err.println(e.getMessage()); } } return serverLocation; } }
ServerLocation.java
package com.mkyong.web.location; public class ServerLocation { private String countryCode; private String countryName; private String region; private String regionName; private String city; private String postalCode; private String latitude; private String longitude; //getter and setter methods }
Spring Controller、
Jackson`ライブラリで
ServerLocation`を変換し、json文字列を返します。
MapController.java
package com.mkyong.web.controller; import org.codehaus.jackson.map.ObjectMapper; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.servlet.ModelAndView; import com.mkyong.web.location.ServerLocation; import com.mkyong.web.location.ServerLocationBo; @Controller public class MapController { @Autowired ServerLocationBo serverLocationBo; @RequestMapping(value = "/", method = RequestMethod.GET) public ModelAndView getPages() { ModelAndView model = new ModelAndView("map"); return model; } //return back json string @RequestMapping(value = "/getLocationByIpAddress", method = RequestMethod.GET) public @ResponseBody String getDomainInJsonFormat(@RequestParam String ipAddress) { ObjectMapper mapper = new ObjectMapper(); ServerLocation location = serverLocationBo.getLocation(ipAddress); String result = ""; try { result = mapper.writeValueAsString(location); } catch (Exception e) { e.printStackTrace(); } return result; } }
4. JSP + jQuery + Googleマップ
検索ボタンがクリックされると、jQueryはAjaxリクエストを発行し、データを処理してGoogle Mapを更新します。
map.jsp
<html> <head> <script src="https://maps.google.com/maps/api/js?sensor=true"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> <body> <h2>Spring MVC + jQuery + Google Map</h2> <div> <input type="text" placeholder="0.0.0.0" id="w-input-search" value=""> <span> <button id="w-button-search" type="button">Search</button> </span> </div> <script> $(document).ready(function() { $("#w-button-search").click(function() { $.getJSON("${pageContext.request.contextPath}/getLocationByIpAddress", { ipAddress : $('#w-input-search').val() }, function(data) { var data = JSON.stringify(data); var json = JSON.parse(data); showMap(json["latitude"],json["longitude"]) $("#result").html(data) }) .done(function() { }) .fail(function() { }) .complete(function() { }); }); var map; function showMap(latitude,longitude) { var googleLatandLong = new google.maps.LatLng(latitude,longitude); var mapOptions = { zoom: 5, center: googleLatandLong, mapTypeId: google.maps.MapTypeId.ROADMAP }; var mapDiv = document.getElementById("map"); map = new google.maps.Map(mapDiv, mapOptions); var title = "Server Location"; addMarker(map, googleLatandLong, title, ""); } function addMarker(map, latlong, title, content) { var markerOptions = { position: latlong, map: map, title: title, clickable: true }; var marker = new google.maps.Marker(markerOptions); } }); </script> <br/> <div id="result"></div> <br/> <div style="width:600px;height:400px" id="map"></div> </body> </html>
5.デモ
IPアドレス:74.125.135.102
IPアドレス:183.81.166.110
ソースコードをダウンロードする
それをダウンロードする –
SpringMvc-jQuery-GoogleMap
(18 KB)
参考文献
ジオロケーションソフトウェア]。
http://dev.maxmind.com/geoip/legacy/geolite/
[GeoLite無料ダウンロード可能
データベース]。 link://java/java-find-location-using-ip-address/[Java – 場所を検索する
IPアドレスを使用して]。
https://developers.google.com/maps/documentation/javascript/tutorial
[Google
マップAPI]。
jQuery.getJSON