jqIpLocation 實際執行畫面

jqIpLocation 可使用 IP 位址來查詢使用者大約位置，主要使用的是 IPInfoDB.com 的 IP 資料庫，在做有關於地圖的網站時，偶爾會需要直接偵測到使用者的約略位置，使用 IP 來取得使用者的方式算是簡單又方便的方式，當然有使用到 HTML5 的網站的話就可以直接使用 Geolocation 會更加的方便。


使用方法：
第一步 載入  jqIpLocation 的 JavaScript 檔案
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- 使用 jQuery 取得 IPInfoDB.com 的資料 -->
<script type="text/javascript" src="jqIpLocation.js"></script>

第二步 寫入 CSS 樣式設計
#divIP{ height:200px;}
.title {color:#AAA;width:100px;}
.result {width:400px;color:#2786C2}


第三步 寫入 HTML 的設計
<div>IP Adress : <input id="txtIP" type="text" style="width:200px;font-size:12px;" value="213.243.4.20" />
  <input type="button" value="Get Location"  onclick="javascript:getLocation();" />
</div>
<div id="divIP"></div>


第四步 寫入 JavaScripts 的程式碼片段
function getLocation(){
 if($('#txtIP').val()!=""){
  $('#divIP').empty().append('<div style="padding:3px;"><img src="loader.gif" /></div>');
  $.jqIpLocation({
  ip : $('#txtIP').val(),
locationType : 'city',
success: function(location) {
 $('#divIP').empty();
 $('#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>');
    }
  });
 }
}

作者網站：http://jquery-plugins.net/jqIpLocation/jqIpLocation_demo.html
檔案大小：38.7 KB (包含範例)
檔案下載：http://jquery-plugins.net/jqIpLocation/jqIpLocation.rar
備份下載：下載