Spring MVC+JQuery+Google Map打造IP位置查找应用(2)

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

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

最后我们在页面中，通过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> 
posted @ 2015-05-26 13:04  天大SCS小组  阅读(171)  评论(0)  编辑  收藏  举报