勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

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>

 - jQuery

  関連記事

pjaxについてのメモ

ずっと気になっていたpjaxについてのメモ。 ■参考サイト http://chi ...

jQueryのCSS変更

jQueryでCSSを触る際、 $("#aaa").css('height',' ...

画像アップロード前の時点で画像が選択されているか確認

やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...

jQueryでiframe内の要素を呼び出し

jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...

jQueryでUNIXタイムスタンプの取得

jQueryでUNIXタイムスタンプを取得したい場合、 $.now()だけで取得 ...

複数のajax処理の結果をまとめて表示

同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...

jQueryでチェックボックスの全チェック&チェック解除

フォームのチェックボックスで「全てにチェックを入れる」「全てのチェックを外す」と ...

POP広告をjQueryで再現する方法

サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...

jQuery2.0がリリース

リリースされたとのこと。 http://blog.jquery.com/2013 ...

FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロード

FlashとjQueryを組み合わせたプラグインを用いてWebカメラで撮影した画 ...