這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)Html5中怎么利用Geolocation獲取地理位置信息，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
創(chuàng)新互聯(lián)長(zhǎng)期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為?？谄髽I(yè)提供專業(yè)的網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)，?？诰W(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。
Html5中提供了地理位置信息的API，通過(guò)瀏覽器來(lái)獲取用戶當(dāng)前位置?；诖颂匦钥梢蚤_(kāi)發(fā)基于位置的服務(wù)應(yīng)用。在獲取地理位置信息前，首先瀏覽器都會(huì)向用戶詢問(wèn)是否愿意共享其位置信息，待用戶同意后才能使用。
Html5獲取地理位置信息是通過(guò)Geolocation API提供，使用其getCurrentPosition方法，此方法中有三個(gè)參數(shù)，分別是成功獲取到地理位置信息時(shí)所執(zhí)行的回調(diào)函數(shù)，失敗時(shí)所執(zhí)行的回調(diào)函數(shù)和可選屬性配置項(xiàng)。
如下Demo演示了通過(guò)Geolocation獲取地理位置信息，并在百度地圖上顯示當(dāng)前位置（通過(guò)調(diào)用百度地圖API）。實(shí)驗(yàn)結(jié)果發(fā)現(xiàn)位置被定位到了大學(xué)城內(nèi)環(huán)東四路入口處，與本人所在位置（華工學(xué)生宿舍）偏差還是有點(diǎn)大的，達(dá)到200-300米左右。
代碼如下所示（其中convertor.js為百度地圖提供的坐標(biāo)轉(zhuǎn)化文件）：
H5地理位置Demo
if (window.navigator.geolocation) {
var options = {
enableHighAccuracy: true,
};
window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options);
} else {
alert("瀏覽器不支持html5來(lái)獲取地理位置信息");
}
function handleSuccess(position){
// 獲取到當(dāng)前位置經(jīng)緯度 本例中是chrome瀏覽器取到的是google地圖中的經(jīng)緯度
var lng = position.coords.longitude;
var lat = position.coords.latitude;
// 調(diào)用百度地圖api顯示
var map = new BMap.Map("map");
var ggPoint = new BMap.Point(lng, lat);
// 將google地圖中的經(jīng)緯度轉(zhuǎn)化為百度地圖的經(jīng)緯度
BMap.Convertor.translate(ggPoint, 2, function(point){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
map.centerAndZoom(point, 15);
});
}
function handleError(error){
}
convertor.js文件：
(function() { // 閉包
function load_script(xyUrl, callback) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = xyUrl;
// 借鑒了jQuery的script跨域方法
script.onload = script.onreadystatechange = function() {
if ((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {
callback && callback();
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
if (head && script.parentNode) {
head.removeChild(script);
}
}
};
// Use insertBefore instead of appendChild to circumvent an IE6 bug.
head.insertBefore(script, head.firstChild);
}
function translate(point, type, callback) {
var callbackName = 'cbk_' + Math.round(Math.random() * 10000); // 隨機(jī)函數(shù)名
var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type
+ "&to=4&x=" + point.lng + "&y=" + point.lat
+ "&callback=BMap.Convertor." + callbackName;
// 動(dòng)態(tài)創(chuàng)建script標(biāo)簽
load_script(xyUrl);
BMap.Convertor[callbackName] = function(xyResult) {
delete BMap.Convertor[callbackName]; // 調(diào)用完需要?jiǎng)h除改函數(shù)
var point = new BMap.Point(xyResult.x, xyResult.y);
callback && callback(point);
}
}
window.BMap = window.BMap || {};
BMap.Convertor = {};
BMap.Convertor.translate = translate;
})();上述就是小編為大家分享的Html5中怎么利用Geolocation獲取地理位置信息了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站標(biāo)題：Html5中怎么利用Geolocation獲取地理位置信息
文章URL：http://weahome.cn/article/pchijp.html
重慶分公司
重慶分公司
