使用Javascript獲取地理位置（省市區）的幾種方式

在之前的一個項目開發中，當時是初步接觸了移動端H5開發，自己就邊學習HTML5相關知識邊開發，當時主要是JQuery比較流行，就使用了JQuery Mobile技術，發現這個不太適合做移動端產品，大部分樣式都需要重寫，只用了部分組件功能。

在手機端端H5開發過程中第一次接觸了定位功能，通過搜索相關知識和查閱幫助文檔發現手機端定位都是通過瀏覽器的內置方法獲取，如果在PC端瀏覽器第一次打開會彈出提示“是否開啟定位功能”，老板看到這個提示，覺得對用戶的體驗效果不好，不好那我們就換一種方式實現不就好了，這也不是多大的事，有的是解決方案，就是要犧牲一點自己的時間。

第一種，手機瀏覽器內置定位方法，使用百度地圖顯示定位數據點

注冊百度開發者賬號，引入 javaScript API 腳本

// 獲取定位數據 var getLocation = function (successFunc, errorFunc) { //successFunc獲取定位成功回調函數，errorFunc獲取定位失敗回調 //首先設置默認城市 var defCity = { id: '000001', name: '北京市', date: curDateTime()//獲取當前時間方法 }; //默認城市 $.cookie('VP_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('VP_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('VP_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('VP_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('VP_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' }); };

第二種，騰訊位置服務接口，IP定位

參考文檔：https://lbs.qq.com/service/webService/webServiceGuide/webServiceIp

// GET請求，注意參數值要進行URL編碼 https://apis.map.qq.com/ws/location/v1/ip?ip=111.206.145.41&key=*****-A4W3E-B7BVO-*****-6TRDJ-*****

第三種，太平洋IP地址庫接口

參考文檔：http://whois.pconline.com.cn/

第四種，搜狐IP地址獲取

查詢接口（默認GBK）：http://pv.sohu.com/cityjson

查詢接口（可設置編碼）：http://pv.sohu.com/cityjson?ie=utf-8

IP地址查詢接口：http://txt.go.sohu.com/ip/soip

獲取客戶端IP方法

$.getScript("http://pv.sohu.com/cityjson?ie=utf-8",function(data){ console.log(returnCitySN); });

溫馨提示

文章內容如果寫的存在問題歡迎留言指出，讓我們共同交流，共同探討，共同進步~~~

文章如果對你有幫助，動動你的小手點個贊，鼓勵一下，給我前行的動力。

JavaScript jQuery

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。