jQueryでIPから位置情報の取得
2014/05/19
jQueryのプラグインでお手軽にIPから
位置情報や経度緯度等調べられたのでメモ。
■jqIpLocation
http://jquery-plugins.net/jqIpLocation/jqIpLocation.html
■ソース
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="jqIpLocation.js"></script>
<script>
function getLocation() {
if ($('#txtIP').val() != "") {
$.jqIpLocation({
ip : $('#txtIP').val(),
locationType : 'city',
success: function(location) {
$('#divIP').append('<div><span class="title">IP : </span><span class="result">'+location.ipAddress+'</span></div>');
$('#divIP').append('<div><span class="title">Country : </span><span class="result">'+location.countryName+'</span></div>');
$('#divIP').append('<div><span class="title">Country Code : </span><span class="result">'+location.countryCode+'</span></div>');
$('#divIP').append('<div><span class="title">City : </span><span class="result">'+location.cityName+'</span></div>');
$('#divIP').append('<div><span class="title">Region : </span><span class="result">'+location.cityName+'</span></div>');
$('#divIP').append('<div><span class="title">Latitude : </span><span class="result">'+location.latitude+'</span></div>');
$('#divIP').append('<div><span class="title">Longitude : </span><span class="result">'+location.longitude+'</span></div>');
}
});
}
}
</script>
<title>IPから位置情報を取得</title>
</head>
<body>
<div>IP Adress : <input id="txtIP" type="text" />
<input type="button" value="submit" onclick="getLocation();" />
</div>
<br/>
<div id="divIP"></div>
</body>
</html>
関連記事
-
さくらのレンタルサーバでCookieが正常に保存できない場合の対応方法
さくらインターネットのレンタルサーバでjquery.cookie.jsを用いてC ...
-
要素の表示or非表示
今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...
-
AjaxFileUploadで処理は実行できてもエラーが返る
AjaxFileUploadでPHPに通信し、サーバー側のPHPで処理は正常に実 ...
-
Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法
画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDro ...
-
NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え
チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...