名扬数据：Spring MVC+JQuery+Google Map打造IP位置查找应用

    在本文中，读者将学习到如何使用Spring MVC框架和jQuery及Google Map,制作一个简单的根据IP位置查找应用。用户可以在页面中输入一个IP地址，然后通过Google Map显示该IP所在的大概地理位置（注：本文使用的数据库是GeoLite）。本教程完成后，其效果图如下：

在本教程中，用户将用到如下技术：

  1. Spring MVC frameworks 

  2. jQuery(Ajax Request) 

  3. GeoLite 数据库 

  4. Google Map 

其中用户的操作步骤如下：

  1. 用户输入IP地址,然后点提交按钮 

  2. jQuery发出Ajax请求到Spring MVC中的控制器 

  3. 在Spring MVC控制器中处理并返回JSON格式数据 

  4. jQuery处理返回的json数据并通过Google Map展示给用户 

1 项目结构

项目结构如下图,使用的是MAVEN工程

这里,我们要下载专门的地理数据库GeoLite,其中我们下载的是GeoLite格式的IP数据库,地址如下: http://dev.maxmind.com/geoip/legacy/geolite/,并放置在resource文件夹下。

2 MAVEN包依赖

在本项目的pom.xml中，加入如下的包依赖，如下：
 

  1. //... 
  2.     <properties> 
  3.         <spring.version>3.2.2.RELEASE</spring.version> 
  4.         <maxmind.geoip.version>1.2.10</maxmind.geoip.version> 
  5.         <jackson.version>1.9.10</jackson.version> 
  6.     </properties> 
  7.   
  8.     <dependencies> 
  9.   
  10.         <!-- Spring Core --> 
  11.         <dependency> 
  12.             <groupId>org.springframework</groupId> 
  13.             <artifactId>spring-core</artifactId> 
  14.             <version>${spring.version}</version> 
  15.         </dependency> 
  16.   
  17.         <!-- need this for @Configuration --> 
  18.         <dependency> 
  19.             <groupId>cglib</groupId> 
  20.             <artifactId>cglib</artifactId> 
  21.             <version>2.2.2</version> 
  22.         </dependency> 
  23.   
  24.         <dependency> 
  25.             <groupId>org.springframework</groupId> 
  26.             <artifactId>spring-web</artifactId> 
  27.             <version>${spring.version}</version> 
  28.         </dependency> 
  29.   
  30.         <dependency> 
  31.             <groupId>org.springframework</groupId> 
  32.             <artifactId>spring-webmvc</artifactId> 
  33.             <version>${spring.version}</version> 
  34.         </dependency> 
  35.   
  36.         <!-- ip to server location --> 
  37.         <dependency> 
  38.             <groupId>com.maxmind.geoip</groupId> 
  39.             <artifactId>geoip-api</artifactId> 
  40.             <version>${maxmind.geoip.version}</version> 
  41.         </dependency> 
  42.   
  43.         <!-- Jackson --> 
  44.         <dependency> 
  45.             <groupId>org.codehaus.jackson</groupId> 
  46.             <artifactId>jackson-mapper-asl</artifactId> 
  47.             <version>${jackson.version}</version> 
  48.         </dependency> 
  49.   
  50.     </dependencies> 
  51.     //... 

3 Spring MVC+Geo Lite

下面首先编写根据IP查找地理位置的接口,命名为ServerLocationBo.java,代码为：

  1. package com.mkyong.web.location; 
  2.  
  3. ublic interface ServerLocationBo { 
  4.  
  5. ServerLocation getLocation(String ipAddress); 

其实现类的代码为：

  1. package com.mkyong.web.location; 
  2.   
  3. import java.io.IOException; 
  4. import java.net.URL; 
  5. import org.springframework.stereotype.Component; 
  6. import com.maxmind.geoip.Location; 
  7. import com.maxmind.geoip.LookupService; 
  8. import com.maxmind.geoip.regionName; 
  9.   
  10. @Component 
  11. public class ServerLocationBoImpl implements ServerLocationBo { 
  12.   
  13.     @Override 
  14.     public ServerLocation getLocation(String ipAddress) { 
  15.   
  16.         String dataFile = "location/GeoLiteCity.dat"; 
  17.         return getLocation(ipAddress, dataFile); 
  18.   
  19.     } 
  20.   
  21.     private ServerLocation getLocation(String ipAddress, String locationDataFile) { 
  22.   
  23.       ServerLocation serverLocation = null; 
  24.   
  25.       URL url = getClass().getClassLoader().getResource(locationDataFile); 
  26.   
  27.       if (url == null) { 
  28.         System.err.println("location database is not found - " 
  29.             + locationDataFile); 
  30.       } else { 
  31.   
  32.       try { 
  33.   
  34.         serverLocation = new ServerLocation(); 
  35.   
  36.         LookupService lookup = new LookupService(url.getPath(), 
  37.                 LookupService.GEOIP_MEMORY_CACHE); 
  38.         Location locationServices = lookup.getLocation(ipAddress); 
  39.   
  40.         serverLocation.setCountryCode(locationServices.countryCode); 
  41.         serverLocation.setCountryName(locationServices.countryName); 
  42.         serverLocation.setRegion(locationServices.region); 
  43.         serverLocation.setRegionName(regionName.regionNameByCode( 
  44.             locationServices.countryCode, locationServices.region)); 
  45.         serverLocation.setCity(locationServices.city); 
  46.         serverLocation.setPostalCode(locationServices.postalCode); 
  47.         serverLocation.setLatitude( 
  48.                                 String.valueOf(locationServices.latitude)); 
  49.         serverLocation.setLongitude( 
  50.                                 String.valueOf(locationServices.longitude)); 
  51.   
  52.       } catch (IOException e) { 
  53.   
  54.         System.err.println(e.getMessage()); 
  55.   
  56.       } 
  57.   
  58.      } 
  59.   
  60.      return serverLocation; 
  61.   
  62.     } 
  63. } 

在上面的这个方法中,在getLocations方法中,加载了GeoLite格式的IP地址库文件GeoLiteCity.dat,并且调用getLocation方法进行IP的查找,.在getLocation方法中,通过GeoLite创建一个LookupService类的实例，其中传入要查询的IP地址库文件，然后再调用其getLocation方法进行查询，这里查询出来的结果构造成serverLocation对象，下面来看下其serverlocation对象的代码：

  1. package com.mkyong.web.location; 
  2.   
  3. public class ServerLocation { 
  4.   
  5.     private String countryCode; 
  6.     private String countryName; 
  7.     private String region; 
  8.     private String regionName; 
  9.     private String city; 
  10.     private String postalCode; 
  11.     private String latitude; 
  12.     private String longitude; 
  13.   
  14.     //getter and setter methods 
  15.   
  16. } 

然后我们使用Spring MVC框架中的Jackson对结果进行转换，转换为json，代码如下：

  1. package com.mkyong.web.controller; 
  2.   
  3. import org.codehaus.jackson.map.ObjectMapper; 
  4. import org.springframework.beans.factory.annotation.Autowired; 
  5. import org.springframework.stereotype.Controller; 
  6. import org.springframework.web.bind.annotation.RequestMapping; 
  7. import org.springframework.web.bind.annotation.RequestMethod; 
  8. import org.springframework.web.bind.annotation.RequestParam; 
  9. import org.springframework.web.bind.annotation.ResponseBody; 
  10. import org.springframework.web.servlet.ModelAndView; 
  11.   
  12. import com.mkyong.web.location.ServerLocation; 
  13. import com.mkyong.web.location.ServerLocationBo; 
  14.   
  15. @Controller 
  16. public class MapController { 
  17.   
  18.     @Autowired 
  19.     ServerLocationBo serverLocationBo; 
  20.   
  21.     @RequestMapping(value = "/", method = RequestMethod.GET) 
  22.     public ModelAndView getPages() { 
  23.   
  24.         ModelAndView model = new ModelAndView("map"); 
  25.         return model; 
  26.   
  27.     } 
  28.   
  29.     //return back json string 
  30.     @RequestMapping(value = "/getLocationByIpAddress", method = RequestMethod.GET) 
  31.     public @ResponseBody 
  32.     String getDomainInJsonFormat(@RequestParam String ipAddress) { 
  33.   
  34.         ObjectMapper mapper = new ObjectMapper(); 
  35.   
  36.         ServerLocation location = serverLocationBo.getLocation(ipAddress); 
  37.   
  38.         String result = ""; 
  39.   
  40.         try { 
  41.             result = mapper.writeValueAsString(location); 
  42.         } catch (Exception e) { 
  43.   
  44.             e.printStackTrace(); 
  45.         } 
  46.   
  47.         return result; 
  48.   
  49.     } 
  50.   
  51. } 

这对于熟悉Spring MVC的用户应该并不陌生。经过转换后的结果转换为字符串。

4 JSP+jQuery+Google Map展示最后的结果

最后我们在页面中，通过jQuery发送ajax请求调用Spring MVC控制层，然后将返回的结果展示在页面中，代码如下：

  1. <html> 
  2. <head> 
  3. <script src="http://maps.google.com/maps/api/js?sensor=true"></script> 
  4. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
  5. </head> 
  6. <body> 
  7.   <h2>Spring MVC + jQuery + Google Map</h2> 
  8.   
  9.   <div> 
  10.     <input type="text" placeholder="0.0.0.0" id="w-input-search" value=""> 
  11.     <span> 
  12.         <button id="w-button-search" type="button">Search</button> 
  13.     </span> 
  14.   </div> 
  15.   
  16.   <script> 
  17.   $(document).ready(function() { 
  18.   
  19.     $("#w-button-search").click(function() { 
  20.   
  21.         $.getJSON("${pageContext.request.contextPath}/getLocationByIpAddress", 
  22.         { 
  23.             ipAddress : $('#w-input-search').val() 
  24.         },  
  25.         function(data) { 
  26.   
  27.             var data = JSON.stringify(data); 
  28.             var json = JSON.parse(data); 
  29.   
  30.             showMap(json["latitude"],json["longitude"]) 
  31.   
  32.             $("#result").html(data) 
  33.   
  34.         }) 
  35.         .done(function() {                           
  36.         }) 
  37.         .fail(function() {  
  38.         }) 
  39.         .complete(function() {           
  40.         }); 
  41.   
  42.     }); 
  43.   
  44.     var map; 
  45.   
  46.     function showMap(latitude,longitude) {  
  47.   
  48.         var googleLatandLong = new google.maps.LatLng(latitude,longitude); 
  49.   
  50.         var mapOptions = {  
  51.             zoom: 5, 
  52.             center: googleLatandLong, 
  53.             mapTypeId: google.maps.MapTypeId.ROADMAP  
  54.         }; 
  55.   
  56.         var mapDiv = document.getElementById("map"); 
  57.         map = new google.maps.Map(mapDiv, mapOptions); 
  58.   
  59.         var title = "Server Location";  
  60.         addMarker(map, googleLatandLong, title, ""); 
  61.   
  62.     } 
  63.   
  64.     function addMarker(map, latlong, title, content) {  
  65.   
  66.         var markerOptions = { 
  67.             position: latlong,  
  68.             map: map, 
  69.             title: title,  
  70.             clickable: true 
  71.         }; 
  72.         var marker = new google.maps.Marker(markerOptions);  
  73.     } 
  74.   
  75.   }); 
  76.   </script> 
  77.   <br/> 
  78.   <div id="result"></div> 
  79.   <br/> 
  80.   <div style="width:600px;height:400px" id="map"></div> 
  81.   
  82. </body> 
  83. </html> 

 


关于我们 | 联系我们 | 付款方式 | 提交工单 | 常见问题 | 独立控制面板

Copyright © 2002-2016 名扬数据, All rights reserved.    备案号：皖ICP备11006951号-1