勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryでIPから位置情報の取得

   2014/05/19  jQuery

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>

 - jQuery

  関連記事

ajaxで複数のデータを渡したい

やりたい事はajaxで複数のデータを渡したい。 ■送信側 var data = ...

formでGET送信時に空のパラメータを送信しない方法(cleanQuery)

フォームでGET送信する際、通常だと空のパラメータも送信される。結果として「ドメ ...

テキストエリアを自動でリサイズ

改行するだけで勝手にリサイズしてくれるので、 ユーザー用でも管理用でも使えそう。 ...

AjaxFileUploadで処理は実行できてもエラーが返る

AjaxFileUploadでPHPに通信し、サーバー側のPHPで処理は正常に実 ...

jQueryで画像を遅延ロードする(jquery.lazyload.js)

画像を遅延ロードさせたい時にはlazyloadが便利。 ■ダウンロード http ...