【前端用法】html5实现地理位置定位（JS获取当前地理位置的方法）

2024-07-10 04:38| 来源: 网络整理| 查看: 265

本文目录

一、背景描述

二、实现方案

方案一

方案二

一、背景描述

目前在做公司的一个网站，有个需求是：当别人进入网站时自动定位他的地理位置，包括市区，方便给他推荐当前城市的特色信息。

其实，这也是一个非常实用的功能，在网上搜到很多，有的不能用，现将我整理的两个能用的记录一下，以便后续再使用。

地理位置（Geolocation）是 HTML5 的重要特性之一，提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用。在下面的demo中使用的是百度提供的api接口，调用html5的geolocation方法获取客户端当前经纬度，从而获得客户端所在的地理位置，包括省市区信息，甚至有街道、门牌号等详细的地理位置信息。

值得注意的一点是，PC很多浏览器对于html5的定位技术是不太友好的，很多浏览器都是默认拒绝定位，一般只有IE是可以正常使用，但是获取到的经纬度偏差很大；相反在手机访问的时候，由于一般手机上都有GPS模块，所以定位效果会好很多，原因就在于手机上的GPS模块对geolocation特性的支持是很好的。结论是，html5的定位在手机上测试是最佳的选择，PC建议使用IE浏览器。

二、实现方案方案一 JS获取当前地理位置的方法 //v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥" // 创建一个函数，主要功能是在调用html5的geolocation()前，先判断当前浏览器是否支持html5，（PC绝大部分浏览器不支持或者拒绝html5定位） function getLocation() { var options = { enableHighAccuracy: true, maximumAge: 1000 }; alert('获取位置信息开始--------->'); if (navigator.geolocation) { // 走到这里说明，浏览器支持geolocation，参数里有两个回调函数，一个是定位成功后的处理操作，一个是定位失败后的处理操作，另外一个参数没有研究过 navigator.geolocation.getCurrentPosition(onSuccess, onError, options); } else { // 否则浏览器不支持geolocation alert('您的浏览器不支持地理位置定位！'); } } // 成功时的回调函数 // 第一步获取定位成功返回的经纬度数据，然后结合百度那边提供的接口进行具体位置的转换，最后还有一个数据提交的方法，要跟自己的业务操作了 function onSuccess(position) { // 返回用户位置 // 经度 var longitude = position.coords.longitude; // 纬度 var latitude = position.coords.latitude; alert('您的当前地址的经纬度：经度' + longitude + '，纬度' + latitude); // 根据经纬度获取地理位置，不太准确，获取城市区域还是可以的 var map = new BMap.Map("allmap"); var point = new BMap.Point(longitude, latitude); var gc = new BMap.Geocoder(); gc.getLocation(point, function (rs) { var addComp = rs.addressComponents; alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber); }); // 这里后面可以写你的后续操作了 handleData(longitude, latitude); } // 失败时的回调函数 // 这里是错误提示信息 function onError(error) { switch (error.code) { case 1: alert("位置服务被拒绝！"); break; case 2: alert("暂时获取不到位置信息！"); break; case 3: alert("获取信息超时！"); break; case 4: alert("未知错误！"); break; } // 这里后面可以写你的后续操作了，下面的经纬度是天安门的具体位置 // 经度 var longitude = 39.9151; // 纬度 var latitude = 116.4041; handleData(longitude, latitude); } // 页面载入时请求获取当前地理位置 window.onload = function () { // html5获取地理位置 getLocation(); }; 方案二 html5实现地理位置定位您目前所在的区域为：

//v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥" //定义一个空的位置构造函数 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("getLocation(callbackFunction) 可获得定位信息对象"); }; var thisSelf = this; if (navigator.geolocation) { //浏览器支持geolocation navigator.geolocation.getCurrentPosition(function (position) { //经度 var longitude = position.coords.longitude; //纬度 var latitude = position.coords.latitude; thisSelf.loadMapApi(longitude, latitude); }, thisSelf.onError, options); } else { //浏览器不支持geolocation alert('您的浏览器不支持地理位置定位3333'); } }; //定义一个可以解析经纬度的方法，调用百度的api Location.prototype.loadMapApi = function (longitude, latitude) { var thisSelf = 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; thisSelf.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) { var str = ""; for (i in res) { str = res[i] + str; } document.querySelector("p").innerHTML = str; })

【参考资料】

1、百度地图开放平台： JavaScript API - 快速入门 | 百度地图API SDK

2、用js定位当前的地理位置：用js定位当前的地理位置 - 风的味道真好闻 - 博客园

3、Javascript学习总结 - html5实现定位地理位置：Javascript学习总结 - html5实现定位地理位置_PHP - UCloud云社区

完结！

【本文地址】

公司简介

联系我们