使用JS獲取當(dāng)前地理位置方法匯總
今年的項(xiàng)目開(kāi)發(fā)中,初步接觸了移動(dòng)端WEB開(kāi)發(fā),也就邊學(xué)習(xí)HTML5邊開(kāi)發(fā),主要使用了JQuery Mobile技術(shù),發(fā)現(xiàn)這個(gè)不適合做互聯(lián)網(wǎng)產(chǎn)品,大部分樣式都需要重寫(xiě),只用了部分功能。手機(jī)端WEB開(kāi)發(fā)過(guò)程中第一次接觸了定位功能,通過(guò)各大搜索引擎發(fā)現(xiàn)手機(jī)端定位都是通過(guò)瀏覽器的定位,而用在PC端瀏覽器第一次會(huì)彈出提示“是否開(kāi)啟定位功能”,Boss看到這個(gè)提示,卻覺(jué)得對(duì)用戶的體驗(yàn)效果不好,不好那我換一種方式實(shí)現(xiàn)不就好了,這又不是多大的事,而B(niǎo)oss的臉色就大變,就說(shuō):不應(yīng)該有這樣的體驗(yàn)。我們這樣做不都是為了趕時(shí)間,能夠盡快將新功能發(fā)布嘛。
1.手機(jī)WEB定位方法:
var getLocation = function (successFunc, errorFunc) { //successFunc獲取定位成功回調(diào)函數(shù),errorFunc獲取定位失敗回調(diào)
//首先設(shè)置默認(rèn)城市
var defCity = {
id: '000001',
name: '北京市',
date: curDateTime()//獲取當(dāng)前時(shí)間方法
};
//默認(rèn)城市
$.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"); // 創(chuàng)建Map實(shí)例
var point = new BMap.Point(lon, lat); // 創(chuàng)建點(diǎn)坐標(biāo)
var gc = new BMap.Geocoder();
gc.getLocation(point, function (rs) {
var addComp = rs.addressComponents;
var curCity = {
id: '',
name: addComp.province,
date: curDateTime()
};
//當(dāng)前定位城市
$.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' });
//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street);
if (successFunc != undefined)
successFunc(addComp);
});
},
function (error) {
switch (error.code) {
case 1:
alert("位置服務(wù)被拒絕。");
break;
case 2:
alert("暫時(shí)獲取不到位置信息。");
break;
case 3:
alert("獲取位置信息超時(shí)。");
break;
default:
alert("未知錯(cuò)誤。");
break;
}
var curCity = {
id: '000001',
name: '北京市',
date: curDateTime()
};
//默認(rèn)城市
$.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"); // 創(chuàng)建Map實(shí)例
var point = new BMap.Point(lon, lat); // 創(chuàng)建點(diǎn)坐標(biāo)
var gc = new BMap.Geocoder();
gc.getLocation(point, function (rs) {
var addComp = rs.addressComponents;
var curCity = {
id: '',
name: addComp.province,
date: curDateTime()
};
//當(dāng)前定位城市
$.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("位置服務(wù)被拒絕。");
break;
case 2:
alert("暫時(shí)獲取不到位置信息。");
break;
case 3:
alert("獲取位置信息超時(shí)。");
break;
default:
alert("未知錯(cuò)誤。");
break;
}
var curCity = {
id: '000001',
name: '北京市',
date: curDateTime()
};
//默認(rèn)城市
$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' });
};
前提要引入百度API:<script src="
2.PC端通過(guò)IP實(shí)現(xiàn)方法: 采用騰訊提供的接口,這個(gè)目前已經(jīng)不能使用了
采用新浪接口: http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js
多地域測(cè)試方法:http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&ip=127.0.0.1
<script type="text/javascript">
$.getScript('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js', function(_result) {
if (remote_ip_info.ret == '1') {
alert('國(guó)家:' + remote_ip_info.country + '<BR>省:' + remote_ip_info.province + '<BR>市:' + remote_ip_info.city + '<BR>區(qū):' + remote_ip_info.district + '<BR>ISP:' + remote_ip_info.isp + '<BR>類(lèi)型:' + remote_ip_info.type + '<BR>其他:' + remote_ip_info.desc);
} else {
alert('沒(méi)有找到匹配的IP地址信息!');
}
});
</script>
網(wǎng)易有道IP地址接口(這個(gè)有待測(cè)試)
http://www.youdao.com/smartresult-xml/search.s?type=ip&q=IP地址
淘寶請(qǐng)求接口(GET)
<script>
var ip = "124.127.108.133";
var url = " $.getJSON(url, function (json) {
var myprovince2 = json.data.area;
var mycity2 = json.data.region;
alert("您所在的城市是:" + myprovince2 + mycity2);
});
</script>
太平洋IP地址庫(kù)API接口
http://whois.pconline.com.cn/?ip=[ip地址字符串]
另外:還有g(shù)oogle、搜狐等提供對(duì)應(yīng)的接口,大家可以自己試一試。
搜狐IP地址查詢接口(默認(rèn)GBK):http://pv.sohu.com/cityjson
搜狐IP地址查詢接口(可設(shè)置編碼):http://pv.sohu.com/cityjson?ie=utf-8
搜狐另外的IP地址查詢接口:http://txt.go.sohu.com/ip/soip
3.獲取客戶端IP方法
<script>
var url = 'http://chaxun.1616.net/s.php?type=ip&output=json&callback=?&_=' + Math.random();
$.getJSON(url, function(data) {
alert(data.Ip);
});
</script>
今天就寫(xiě)到這吧,還有好多工作需要去完成,等有時(shí)間了可以試試其它接口。歡迎大家來(lái)拍磚,提供更好的方法。
相關(guān)文章
JavaScript+html5 canvas繪制的圓弧蕩秋千效果完整實(shí)例
這篇文章主要介紹了JavaScript+html5 canvas繪制的圓弧蕩秋千效果,以完整實(shí)例形式分析了JavaScript集合html5的canvas繪制圖形的相關(guān)技巧,需要的朋友可以參考下2016-01-01js實(shí)現(xiàn)Select列表各項(xiàng)上移和下移的方法
這篇文章主要介紹了js實(shí)現(xiàn)Select列表各項(xiàng)上移和下移的方法,涉及javascript動(dòng)態(tài)操作頁(yè)面元素屬性值的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08js循環(huán)動(dòng)態(tài)綁定帶參數(shù)函數(shù)遇到的問(wèn)題及解決方案[轉(zhuǎn)]
關(guān)于Javascript利用循環(huán)綁定事件的例子,需要的朋友可以參考下。2010-11-11在JavaScript中添加css樣式(js追加類(lèi))代碼示例
這篇文章主要給大家介紹了關(guān)于在JavaScript中如何添加css樣式,也就是js追加類(lèi)的相關(guān)資料,JavaScript是一種廣泛應(yīng)用于互聯(lián)網(wǎng)開(kāi)發(fā)的編程語(yǔ)言,它能夠幫助網(wǎng)頁(yè)實(shí)現(xiàn)動(dòng)態(tài)效果和交互性,需要的朋友可以參考下2024-01-01JavaScript全排列的六種算法 具體實(shí)現(xiàn)
這篇文章介紹了全排列的六種算法有,交換算法,鏈接算法,回溯算法等,有需要的朋友可以參考一下2013-06-06JS使用Date對(duì)象實(shí)時(shí)顯示當(dāng)前系統(tǒng)時(shí)間簡(jiǎn)單示例
這篇文章主要介紹了JS使用Date對(duì)象實(shí)時(shí)顯示當(dāng)前系統(tǒng)時(shí)間,涉及javascript基于定時(shí)器動(dòng)態(tài)操作Date對(duì)象相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08taro 實(shí)現(xiàn)購(gòu)物車(chē)邏輯的實(shí)例代碼
這篇文章主要介紹了taro 實(shí)現(xiàn)購(gòu)物車(chē)邏輯,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06