今年的專案開發中，初步接觸了行動端WEB開發，也就邊學習HTML5邊開發，主要使用了JQuery Mobile技術，發現這個不適合做網路產品，大部分樣式都需要重寫，只用了部分功能。手機端WEB開發過程中第一次接觸了定位功能，透過各大搜尋引擎發現手機端定位都是透過瀏覽器的定位，而用在PC端瀏覽器第一次會彈出提示“是否開啟定位功能” ，Boss看到這個提示，卻覺得對使用者的體驗效果不好，不好那我換一種方式實現不就好了，這又不是多大的事，而Boss的臉色就大變，就說：不應該有這樣的體驗。我們這樣做不都是為了趕時間，能夠盡快發布新功能嘛。
1.手機WEB定位方法：
var getLocation = function (successFunc, errorFunc) { //successFunc取得定位成功回呼函數，errorFunc取得定位失敗回呼
//先設定預設城市
var defCity = {
id: '000001',
name: '北京市',
date: curDateTime()//取得目前時間方法
};
//預設城市
$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(defCity), { expires: 1, path: '/' });
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
//var map = new BMap.Map("container"); // 建立Map實例
var point = new BMap.Point(lon, lat); // 建立點座標
var gc = new BMap.Geocoder();
gc.getLocation(point, function (rs) {
var addComp = rs.addressComponents;
var curCity = {
id: '',
name: addComp.province,
date: curDateTime()
};
//目前定位城市
$.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' }))
;
;
if (successFunc != undefined)
successFunc(addComp);
});
},
function (error) {
switch (error.code) {
case 1:
alert("位置服務被拒絕。");
break;
case 2:
alert("暫時取得少於位置資訊。");
break;
case 3:
alert("取得位置資訊逾時。");
break;
default:
alert("未知誤差。");
break; }
var curCity = {
id: '000001',
name: '北市',
date: curDateTime()
};
//預設城市
$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' });
if (errorFunc != undefined)
errorFunc(error);
}, { timeout: 5000, enableHighAccuracy: true });
} else {
alert("你的瀏覽器不支援取得地理位置資訊。");
if (errorFunc != undefined)
errorFunc("你的瀏覽器不支援取得地理位置資訊。");
}
};
var showPosition = function (position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
//var map = new BMap.Map("container"); // 建立Map實例
var point = new BMap.Point(lon, lat); // 建立點座標
var gc = new BMap.Geocoder();
gc.getLocation(point, function (rs) {
var addComp = rs.addressComponents;
var curCity = {
id: '',
name: addComp.province,
date: curDateTime()
};
//目前定位城市
$.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' });
//alert(addComp.province ", " addComp.city ", " addComp.district ", " addComp.street);
});
};
var showPositionError = function (error) {
switch (error.code) {
case 1:
alert("位置服務被拒絕。");
break;
case 2:
alert("暫時取得少於位置資訊。");
break;
case 3:
alert("取得位置資訊逾時。");
break;
default:
alert("未知誤差。");
break;
}
var curCity = {
id: '000001',
name: '北京市',
date: curDateTime()
};
//預設城市
$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' });
};
前提要引入百度API：
2.PC端透過IP實作方法：
採用騰訊提供的接口，這個目前已經不能使用了
>
採用新浪介面： http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js
多地域測試方法：http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&ip=127.0.0.1
網易有道IP位址介面（這個有待測試）
http://www.youdao.com/smartresult-xml/search.s?type=ip&q=IP位址
淘寶請求介面（GET）
<script><br />
var ip = "124.127.108.133";<br />
var url = "<a href="http://ip.taobao.com/service/getIpInfo.php?ip">http://ip.taobao.com/service/getIpInfo.php?ip=" ip;<br />
$.getJSON(url, function (json) {<br />
var myprovince2 = json.data.area;<br />
var mycity2 = json.data.region;<br />
alert("您所在的城市為：" myprovince2 mycity2);<br />
});<br />
</script>
太平洋IP位址庫API介面
http://whois.pconline.com.cn/?ip=[ip位址字串]
另外：還有google、搜狐等提供對應的接口，大家可以自己試試看。
搜狐IP位址查詢介面（預設GBK）：http://pv.sohu.com/cityjson
搜狐IP位址查詢介面（可設定編碼）：http://pv.sohu.com/cityjson?ie=utf-8
搜狐另外的IP位址查詢介面：http://txt.go.sohu.com/ip/soip
3.取得客戶端IP方法
<script><br />
var url = 'http://chaxun.1616.net/s.php?type=ip&output=json&callback=?&_=' Math.random();<br />
$.getJSON(url, function(data) {<br />
alert(data.Ip);<br />
});<br />
</script>
今天就寫到這裡吧，還有好多工作要去完成，等有時間了可以試試其它接口。歡迎大家來拍磚，提供更好的方法。
