使用JS獲取當前地理位置方法匯總
更新時間：2014年12月18日 08:49:53 投稿：hebedich
這篇文章主要介紹了使用JS獲取當前地理位置方法匯總,需要的朋友可以參考下
今年的項目開發(fā)中，初步接觸了移動端WEB開發(fā)，也就邊學習HTML5邊開發(fā)，主要使用了JQuery Mobile技術，發(fā)現(xiàn)這個不適合做互聯(lián)網產品，大部分樣式都需要重寫，只用了部分功能。手機端WEB開發(fā)過程中第一次接觸了定位功能，通過各大搜索引擎發(fā)現(xiàn)手機端定位都是通過瀏覽器的定位，而用在PC端瀏覽器第一次會彈出提示“是否開啟定位功能”，Boss看到這個提示，卻覺得對用戶的體驗效果不好，不好那我換一種方式實現(xiàn)不就好了，這又不是多大的事，而Boss的臉色就大變，就說：不應該有這樣的體驗。我們這樣做不都是為了趕時間，能夠盡快將新功能發(fā)布嘛。
1.手機WEB定位方法：
復制代碼 代碼如下:
var getLocation = function (successFunc, errorFunc) { //successFunc獲取定位成功回調函數(shù)，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"); // 創(chuàng)建Map實例
var point = new BMap.Point(lon, lat); // 創(chuàng)建點坐標
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);
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"); // 創(chuàng)建Map實例
var point = new BMap.Point(lon, lat); // 創(chuàng)建點坐標
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：<script src="
2.PC端通過IP實現(xiàn)方法： 采用騰訊提供的接口，這個目前已經不能使用了 復制代碼 代碼如下:
采用新浪接口： 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
復制代碼 代碼如下:
<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('國家：' + 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>類型：' + remote_ip_info.type + '<BR>其他：' + remote_ip_info.desc);
} else {
alert('沒有找到匹配的IP地址信息！');
}
});
</script>
網易有道IP地址接口（這個有待測試）
http://www.youdao.com/smartresult-xml/search.s?type=ip&q=IP地址
淘寶請求接口（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地址庫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>
var url = 'http://chaxun.1616.net/s.php?type=ip&output=json&callback=?&_=' + Math.random();
$.getJSON(url, function(data) {
alert(data.Ip);
});
</script>
今天就寫到這吧，還有好多工作需要去完成，等有時間了可以試試其它接口。歡迎大家來拍磚，提供更好的方法。
相關文章
這篇文章主要介紹了詳解如何愉快的在微信小程序中使用SVG圖標,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
這篇文章主要為大家介紹了提高團隊代碼質量利器ESLint及Prettier使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
JGrid 中，可以拖動改變列寬，簡單的原理就是改變相應的 col 的 style.width 今天看到skybot 同學在問這個問題，就又把這個功能拿出來，單獨實現(xiàn)了一下（有改進）2008-07-07
這篇文章主要介紹了Javascript中Array用法,實例分析了javascript中數(shù)組的遍歷、傳值、比較等常用技巧,需要的朋友可以參考下2015-06-06
擴展運算符（Spread Operator）和剩余參數(shù)（Rest Parameters）是JavaScript中的兩個非常有用的特性,實際應用中,這些功能可以用于合并數(shù)組、復制對象屬性等操作,極大地提高了JavaScript編程的便利性和功能性,感興趣的朋友跟隨小編一起看看吧2024-09-09
javascript頁面上使用動態(tài)時間具體實現(xiàn)
這篇文章主要介紹了javascript在頁面上使用動態(tài)時間實現(xiàn)示例,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了JS正則表達式判斷有效數(shù)實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
本文主要對javascript中的（Event）事件進行介紹，文章篇尾舉了幾個案例：方塊隨著鼠標移動；輸入框文字提示；仿select控件；留言本；自定義右鍵菜單；鍵盤控制div運動。需要的朋友可以看下2016-12-12
在開發(fā)微信小程序時,有需求需要使用到柱狀圖,餅圖等圖表,下面這篇文章主要給大家介紹了關于小程序中使用echarts的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
js中小數(shù)轉換整數(shù)的方法有很多，有下退、上進、四舍五入等等，需要的朋友可以了解下本文2014-01-01