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

时间：2015-05-26 14:19:21 阅读：182 评论：0 收藏：0 [点我收藏+]

标签：

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>

标签：

原文地址：http://www.cnblogs.com/tjuscs2014/p/4530364.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行