zoukankan      html  css  js  c++  java

  • 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="600px;height:400px" id="map"></div> 
    81.   
    82. </body> 
    83. </html> 
  • 相关阅读:
    selenium测试（Java）-- 键盘事件（七）
    selenium测试（Java）--鼠标事件（六）
    selenium测试（Java）--元素操作（五）
    selenium测试（Java）--浏览器控制（四）
    selenium测试（Java）（三）
    selenium定位方法（java实例）（二）
    selenium测试环境搭建（一）
    HTML5前端（移动端网站）性能优化指南
    dede使用方法----如何调用最新文章,最热文章,友情链接
    dede使用方法---如何调用指定栏目
  • 原文地址：https://www.cnblogs.com/tjuscs2014/p/4530364.html
Copyright © 2011-2022 走看看