JSP+jQuery+Google Map展示最后的结果
在本文中，读者将学习到如何使用Spring MVC框架和jQuery及Google Map,制作一个简单的根据IP位置查找应用。用户可以在页面中输入一个IP地址，然后通过Google Map显示该IP所在的大概地理位置（注：本文使用的数据库是GeoLite）。
最后我们在页面中，通过jQuery发送ajax请求调用Spring MVC控制层，然后将返回的结果展示在页面中，代码如下：
- <html>
- <head>
- <script src="http://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>
时间： 2024-11-05 13:35:59