JavaScript 实现手机精确定位至街道门牌号
作者:代码拾荒时间:2026-10-29 19:32:10浏览:339
本文介绍如何使用 JavaScript 调用 HTML5 Geolocation API 获取手机当前位置。通过配置高精度模式与超时参数,结合地理编码服务将经纬度转换为具体的省、市、县、街道及门牌号信息,实现从坐标到详细地址的完整解析流程。
以下展示基于 JavaScript 实现手机精确定位并获取当前具体位置(精确到省、市、县、街道及门牌号)的核心代码实现。
JavaScript 精确定位代码实现
function Location(){};
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){
//经度
var longitude = position.coords.longitude;
//纬度
var latitude = position.coords.latitude;
self.loadMapApi(longitude,latitude);
}, self.onError, options);
} else {
//浏览器不支持geolocation
}
};
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);
});
}
};
Location.prototype.onError = function(error) {
switch (error.code) {
case 1:
alert("位置服务被拒绝");
break;
case 2:
alert("暂时获取不到位置信息");
break;
case 3:
alert("获取信息超时");
break;
case 4:
alert("未知错误");
break;
}
};
//调用
var local = new Location();
local.getLocation(function(res){
//此处就是返回的地理位置信息
console.log(res);
})
以上即为基于 JavaScript 实现手机定位并获取详细地理位置信息的完整示例,供参考使用。
作者最新文章
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式:声明、表达式与箭头函数
2026-11-05 13:50:55
JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异
2026-11-05 12:47:23
