基于JavaScript定位當(dāng)前的地理位置
更新時間：2017年04月11日 16:20:08 作者：紫竹玉龍
這篇文章主要為大家詳細介紹了基于JavaScript定位當(dāng)前的地理位置，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js定位當(dāng)前地理位置的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Title</title>
</head>
<body>
您目前在<p></p>
</body>
<script>
//定義一個空的位置構(gòu)造函數(shù)
function Location(){};
//定義一個可以獲得經(jīng)緯度的方法
Location.prototype.getLocation = function(callback){
var options = {
enableHighAccuracy: true,
maximumAge: 1000
};
this.callback = Object.prototype.toString.call(callback) =="[object Function]" ?
callback :
function(address){
alert(address.province + address.city);
console.log("getocation(callbackFunction) 可獲得定位信息對象");
};
var self = this;
if (navigator.geolocation) {
//瀏覽器支持geolocation
navigator.geolocation.getCurrentPosition(function(position){
//經(jīng)度
var longitude = position.coords.longitude;
//緯度
var latitude = position.coords.latitude;
self.loadMapApi(longitude,latitude);
}, self.onError, options);
} else {
//瀏覽器不支持geolocation
}
};
//定義一個可以解析經(jīng)緯度的方法，調(diào)用百度的api
Location.prototype.loadMapApi = function(longitude, latitude){
var self = this;
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src="http://api.map.baidu.com/getscript?v=2.0&ak=A396783ee700cfdb9ba1df281ce36862&services=&t=20140930184510";
oHead.appendChild(oScript);
oScript.onload = function(date){
var point = new BMap.Point(longitude, latitude);
var gc = new BMap.Geocoder();
gc.getLocation(point, function(rs) {
var addComp = rs.addressComponents;
self.callback(addComp);
});
}
};
//定義出現(xiàn)查詢位置出現(xiàn)意外的方法
Location.prototype.onError = function(error) {
switch (error.code) {
case 1:
alert("位置服務(wù)被拒絕");
break;
case 2:
alert("暫時獲取不到位置信息");
break;
case 3:
alert("獲取信息超時");
break;
case 4:
alert("未知錯誤");
break;
}
};
//調(diào)用
var local = new Location();
local.getLocation(function(res){
var str=""
for(i in res ){
str=res[i]+str
}
document.querySelector("p").innerHTML=str;
})
</script>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了微信小程序云開發(fā)的詳細教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
仿iPhone通訊錄制作小程序自定義選擇組件的實現(xiàn)
這篇文章主要介紹了仿iPhone通訊錄制作小程序自定義選擇組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
微信小程序+騰訊地圖開發(fā)實現(xiàn)路徑規(guī)劃繪制
這篇文章主要介紹了微信小程序+騰訊地圖開發(fā)實現(xiàn)路徑規(guī)劃繪制，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
下面小編就為大家?guī)硪黄远x事件解決重復(fù)請求BUG的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
webpack5處理圖片、圖標字體、多媒體等靜態(tài)資源文件
在 webpack5 中內(nèi)置了 file-loader、url-loader、raw-loader, 可以直接通過配置實現(xiàn)常用功能,下面就來介紹一下webpack5處理圖片、圖標字體、多媒體等靜態(tài)資源文件的實現(xiàn)方法,感興趣的可以了解一下2023-12-12
Javascript實現(xiàn)網(wǎng)絡(luò)監(jiān)測的方法
這篇文章主要介紹了Javascript實現(xiàn)網(wǎng)絡(luò)監(jiān)測的方法,可實現(xiàn)檢測網(wǎng)絡(luò)連接及網(wǎng)速的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07 
這篇文章介紹了JavaScript模擬類機制及私有變量的方法及思路，有需要的朋友可以參考一下
2013-07-07 
Jquery和JS用外部變量獲取Ajax返回的參數(shù)值的方法實例(超簡單)
Jquery和JS用外部變量獲取Ajax返回的參數(shù)值的方法實例(超簡單)，需要的朋友可以參考一下
2013-06-06 
小程序安全指南之如何禁止外部直接跳轉(zhuǎn)到小程序某頁面
由于小程序跳轉(zhuǎn)的對象比較多,各自的規(guī)則又不一樣,因此小程序跳轉(zhuǎn)外部鏈接是用戶咨詢較多的問題之一,下面這篇文章主要給大家介紹了關(guān)于小程序安全指南之如何禁止外部直接跳轉(zhuǎn)到小程序某頁面的相關(guān)資料,需要的朋友可以參考下
2022-09-09