-
2022-03-28 10:16:31
需求描述
在HTML页面获取当前定位经纬度
代码
优先使用地理位置定位,定位失败时取百度定位,否则使用高德IP定位:
<!-- 引入百度地图API(需申请百度地图开发者账号,创建秘钥使用) --> <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> // 判断字符串是否为空 function isStrEmpty(str) { return "undefined" === typeof str || str === null || str === "undefined" || str === "null" || str.toString().trim().length < 1; } var current_lng, current_lat; // 当前定位经度,当前定位纬度 var getCurrentPosition = function () { console.log("定位中.."); // 此处可在页面增加定位加载效果提示用户 if (navigator.geolocation) { // 浏览器支持定位 navigator.geolocation.watchPosition( // 监听定位变更 function (pos) { // 成功回调函数,接受一个地理位置的对象作为参数(网页需配置https) current_lng = pos.coords.longitude; current_lat = pos.coords.latitude; console.log("地理位置定位: " + current_lng + "," + current_lat); // 注意:此处经纬度为wgs84坐标 console.log("定位成功!"); // 此处可在页面增加定位成功提示 }, function (error) { // 出错时取百度地图定位(需引入引入百度地图API) console.log("需开启定位权限!"); // 此处可在页面增加提示 var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function (r) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { current_lng = r.point.lng; current_lat = r.point.lat; console.log("百度地图定位: " + current_lng + "," + current_lat); // 注意:此处经纬度为百度坐标 console.log("定位成功!"); // 此处可在页面增加定位成功提示 } }); }, { enableHighAccuracy: true, // 是否获取高精度结果 timeout: 1000, // 超时,毫秒 maximumAge: 0 // 可以接受多少毫秒的缓存位置 }); } else { // 高德IP定位(精度低) console.log("您的浏览器不支持定位.."); $.ajax({ // 需引入jQuery type: "POST", // 调用高德IP定位(需申请高德地图开发者账号,创建秘钥使用) url: "https://restapi.amap.com/v3/ip?key=您的秘钥", async: true, // 默认:异步请求 contentType: "application/json; charset=utf-8", dataType: "json", data: "", success: function (data) { // console.log(data, JSON.stringify(data)); if ("rectangle" in data && !isStrEmpty(data.rectangle)) { // data.rectangle:IP所在经纬度范围 // data.rectangle:"116.0119343,39.66127144;116.7829835,40.2164962" var locList = data.rectangle.split(";"); var lngSum = 0, latSum = 0; for (var i in locList) { var locInfos = locList[i].split(","); lngSum = parseFloat(lngSum) + parseFloat(locInfos[0]); latSum = parseFloat(latSum) + parseFloat(locInfos[1]); } // 取返回经纬度的平均值,保留6位小数 current_lng = parseFloat(lngSum / locList.length).toFixed(6); current_lat = parseFloat(latSum / locList.length).toFixed(6); console.log("高德地图定位: " + current_lng + "," + current_lat); // 定位误差巨大..经纬度坐标不同导致的偏差可忽略不计 console.log("定位成功!"); // 此处可在页面增加定位成功提示 } } }); } };
注意
①要在HTML网页获取到较为精确的定位,需要给网页配置HTTPS,以及提示用户打开定位;
②使用百度/高德定位需申请相应的开发者账号,创建秘钥使用;
③每种方式取到的经纬度坐标不同,为了减少误差,需根据具体需求进行坐标转换参考文档
[1] 地理位置定位(navigator.geolocation)
[2] 百度地图定位(BMap.Geolocation)
[3] 高德IP定位
[4] jQuery.ajax
[5] 配置HTTPS
[6] 坐标转换更多相关内容 -
获取鼠标实时坐标位置
2019-03-21 16:54:46下载之后,无需安装,直接点击pyautogu.exe,可以获取鼠标实时坐标位置,辅助支持开发自动化软件、游戏辅助软件、网页自动化、爬虫、游戏外挂等 -
bat获取网页源码并保存txt到指定位置
2021-10-11 10:23:36bat获取网页源码并保存txt到指定位置 -
了解一下在网页中获取地理位置,HTML5,geolocation对象使用
2018-08-07 16:33:07获取位置信息的几种方式 1.IP地址:一般个人IP都是从移动、电信等ISP动态提供的,这样的定位获取的结果可能都是离你最新的ISP位置; 2.GPS定位:利用GPS卫星定位,结果当然比较准确,但如果是手机之类的耗电比较大...一.获取位置信息的几种方式
1.IP地址:一般个人IP都是从移动、电信等ISP动态提供的,这样的定位获取的结果可能都是离你最新的ISP位置;
2.GPS定位:利用GPS卫星定位,结果当然比较准确,但如果是手机之类的耗电比较大;
3.WIFI定位:根据你当前接入的无线所在的位置进行定位;
4.手机定位:通过手机接入的基站计算所在位置,或者使用上述GPS或WIFI定位,这个手机会自动选择最合适的,因此如果你没有使用无线,有的APP可能会提醒接入无线可以提高定位的精确度;
5.用户自定义:在页面中直接给出输入框,让用户直接输入所在位置。不知道有没有什么最新的定位技术,哈哈,如果有请私信告知蛋黄酥。以上所有的定位结果都是获取经度和纬度等信息,据我所知一般都是十进制表示的,比如百度地图、谷歌地图都是使用十进制表示经纬度。
二.使用HTML5的geolocation对象
在我们调用geolocation获取用户位置信息是,具体使用了上述的哪种方法是根据当前设备决定的,它如果可以使用多种方法,浏览器会自动使用其中最合适的方法。还有一点需要注意,使用geolocation的方法会询问用户是否允许!!!
检查浏览器是否支持:if (navigator.geolocation){ // yes } else { // no }
只获取一次位置信息的方法:
var gl = navigator.geolocation; // 前两个参数为回调函数,第三个参数的可选的设置 // success 位置获取成功时调用 // error 位置获取发生错误时调用 // options 位置获取时的设置,可以使用JSON对象设置 gl.getCurrentPosition(success,error,options); function success(p){ // p参数包含两个对象 // p.coords 可以获取定位的所有信息 // p.timestamp 可以获取定位的时间戳 alert("当前位置纬度为:" + p.coords.latitude + " 经纬为:" + p.coords.longtitude + " 位置偏差为:" + p.coords.accuracy + "米"); // 当然coords还有其他的一些属性 // 可以根据经纬度做自己需要实现的功能 } function error(err){ // 根据err.code不同,判断发生了何种错误 switch (err.code){ case 0: alert("发生了未定义错误" + err.message); break; case 1: alert("用户不允许获取位置信息" + err.message); break; case 2: alert("获取位置失败" + err.message); break; case 3: alert("获取位置超时" + err.message); } } var options = { timeout : 5000 } // 设置超时时间为5000毫秒,如果位置获取超出这个时间,就会触发编号为3的错误;使用时把这段代码放在getCurrentPosition之前或直接写在它的参数中。
上述仅仅获取一次位置信息,可以多次调用获取用户最新的位置的信息,但这样不方便实现实时获取用户的位置信息,可以使用另一个方法 watchPosition(success,error) 方法,该方法在用户位置信息改变时会自动调用,是一个后台实时监控方法,它的两个参数和 getCurrentPosition 一样,使用方式也一样,这里就不再赘述了,但要注意:
// 使用 watchPosition 方法给它一个标识符,这样可以在合适的时候停止获取用户的位置信息 var watchID = gl.watchPosition(success,error); // ... // 在合适的时间停止它 gl.clearWatch(watchID);
三.定位信息的用途
1.可以使用 watchPosition 实时获取用户的定位信息,计算它当前行走的距离、速度等;
2.结合地图应用,比如百度地图、谷歌地图都是可以免费使用的,但有一些限制,比如日请求次数等,利用实时定位在地图上获取用户的行走路线;
比如下面是一个使用百度地图的例子:// 这个脚本必须先引入到你自己的页面中,下面的那个密钥可以去百度地图开放api官网免费注册获得。所以我自己的当然不能放上去了 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> // 下面使用官网的一段代码 <script> // 百度地图API功能 // allmap 是你页面自定位的div等标签的id,用来放地图 var map = new BMap.Map("allmap"); // 根据经纬度初始化地图的位置 var point = new BMap.Point(116.331398,39.897445); // 位置居中并设置地图显示的详细程度 map.centerAndZoom(point,12); // 百度地图封装了 geolocation 对象,原理是一样的 var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ if(this.getStatus() == BMAP_STATUS_SUCCESS){ // 如果获取成功,根据经纬度新建一个标记,默认是一个带尖的红点 var mk = new BMap.Marker(r.point); // 将新建的标记添加到地图上 map.addOverlay(mk); // 移动地图到定位获得的经纬度上 map.panTo(r.point); alert('您的位置:'+r.point.lng+','+r.point.lat); } else { alert('failed'+this.getStatus()); } },{enableHighAccuracy: true}) // enableHighAccuracy 参数设置告诉浏览器使用精确定位
-
html网页 js获取当前地理位置
2020-12-19 22:25:13通过当前html获取当前地址,借助高德地图实现,效果图 开箱即用 两张标记点的图 核心代码 var marker, map = new AMap.Map('container', { resizeEnable: true }); AMap.plugin('AMap.Geolocation', ...通过当前html获取当前地址,借助高德地图实现https://lbs.amap.com,效果图
开箱即用
两张标记点的图
核心代码
var marker, map = new AMap.Map('container', { resizeEnable: true }); AMap.plugin('AMap.Geolocation', function () { var geolocation = new AMap.Geolocation({ enableHighAccuracy: true,//是否使用高精度定位,默认:true timeout: 20000, //超过10秒后停止定位,默认:5s buttonPosition: 'RB', //定位按钮的停靠位置 buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20) zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点 showCircle: true,//是否显示定位精度圈 }); map.addControl(geolocation); geolocation.getCurrentPosition(function (status, result) { if (status === 'complete') { onComplete(result) } else { onError(result) } }); }); //解析定位结果 function onComplete(data) { console.log('定位成功') var str = []; console.log(data) console.log('定位结果:' + data.position); console.log('定位类别:' + data.location_type); if (data.accuracy) { console.log('精度:' + data.accuracy + ' 米'); }//如为IP精确定位结果则没有精度信息 console.log('是否经过偏移:' + (data.isConverted ? '是' : '否')); document.getElementById("current").innerText = data.formattedAddress marker_t(data.position) // marker.setAnimation('AMAP_ANIMATION_BOUNCE'); } //解析定位错误信息 function onError(data) { console.log('定位失败') console.log('失败原因排查信息:' + data.message); }
// 高德地图查询周边 function aMapSearchNearBy(centerPoint, city) { AMap.service(["AMap.PlaceSearch"], function () { var placeSearch = new AMap.PlaceSearch({ pageSize: 50, // 每页10条 pageIndex: 1, // 获取第一页 // city: city // 指定城市名(如果你获取不到城市名称,这个参数也可以不传,注释掉) children: 1, type: "汽车服务|汽车销售|汽车维修|摩托车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业|道路附属设施|地名地址信息|公共设施" }); // 第一个参数是关键字,这里传入的空表示不需要根据关键字过滤 // 第二个参数是经纬度,数组类型 // 第三个参数是半径,周边的范围 // 第四个参数为回调函数 placeSearch.searchNearBy('', centerPoint, 2000, function (status, result) { console.log(result.info) if (result.info === 'OK') { console.log(result) locationList = result.poiList.pois; // 周边地标建筑列表 $("#poiList").empty() if (locationList && locationList.length > 0) $("#current").text(getFormatAddr(locationList[0])) for (let i = 0; i < locationList.length; i++) { var item = "<li onclick='selected_lc(" + i + ")'>" // item += "<img class='left_t' src='../portal/images/location_top_sm.png' alt=''/>" item += "<p class='addr_name'>" + locationList[i].name + "</p>" item += "<p class='all_addr'>" + locationList[i].pname + locationList[i].cityname + locationList[i].adname + locationList[i].address + "</p>" item += " </li>" // alert(item) $("#poiList").append(item) } //document.getElementById("poiList").innerHTML=str // 生成地址列表html createLocationHtml(locationList); } else { console.log('获取位置信息失败!'); } }); }); }
完整代码:https://download.csdn.net/download/qq_41389354/13732676
代码出现任何问题请联系我QQ:1603565290,浏览器接入互联网而且必须允许获取位置信息,
-
调用百度地图接口获取位置,亲测可用
2015-08-28 09:34:15调用百度地图接口获取位置,亲测可用 -
网页版高德地图是如何获取位置信息的
2015-09-23 02:19:58webapp如何获取位置信息,html5的不好用,有没有大侠贴代码出来, -
PC网页端 获取城市位置名称
2019-04-13 08:50:31//根据经纬度获取城市的名称 // 使用百度地图JS API var point = new BMap.Point(r.point.lng,r.point.lat); var geoc = new BMap.Geocoder(); geoc.getLocation(point, function(rs){ var addComp = rs...1、登录百度地图API官网
2、开发文档——web开发——JavaScript ApI
在API文档中有详细的开发步骤和相关的Demo
3、立即使用
2、申请秘钥
应用名称随意,只要后面是输入正确就可以
应用类型:浏览器端
白名单:由于是本地项目,不是需要发布的项目,所以我输入了*
点击提交
html代码如下
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>浏览器定位</title> </head> <body> <h1 id="allmap"></h1> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.331398,39.897445); map.centerAndZoom(point,12); var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ if(this.getStatus() == BMAP_STATUS_SUCCESS){ var mk = new BMap.Marker(r.point); map.addOverlay(mk); map.panTo(r.point); alert('您的位置:'+r.point.lng+','+r.point.lat); //根据经纬度获取城市的名称 // 使用百度地图JS API var point = new BMap.Point(r.point.lng,r.point.lat); var geoc = new BMap.Geocoder(); geoc.getLocation(point, function(rs){ var addComp = rs.addressComponents; $("#allmap").html(addComp.city); alert('您所在城市:'+addComp.city); }); } else { alert('failed'+this.getStatus()); } },{enableHighAccuracy: true}) //关于状态码 //BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。 //BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。 //BMAP_STATUS_UNKNOWN_LOCATION 位置结果未知。对应数值“2”。 //BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。 //BMAP_STATUS_INVALID_KEY 非法密钥。对应数值“4”。 //BMAP_STATUS_INVALID_REQUEST 非法请求。对应数值“5”。 //BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增) //BMAP_STATUS_SERVICE_UNAVAILABLE 服务不可用。对应数值“7”。(自 1.1 新增) //BMAP_STATUS_TIMEOUT 超时。对应数值“8”。(自 1.1 新增) </script>
原理 根据经纬度来定位
-
移动网页自动获取当前位置信息
2018-11-12 13:51:12这个geolocation对象根据手机提供的定位方式,(wifi定位,卫星定位,ip定位等等)自己选择最优的定位方式,获取位置参数。 参数包括经度,维度,地址名称。 接下来上代码。 在需要的页面中引入百度地图api: &... -
微信开发获取地理位置实例(java)
2016-01-12 11:18:36微信开发获取地理位置实例(java),使用环境 eclipse + maven + springmvc,虽然项目名是first_maven_project,但是确实是微信开发实例哈,不要有任何怀疑,免费分享啦,哈哈。实例讲解欢迎访问博主博客... -
根据经纬度获取位置信息
2019-07-30 14:06:10一般情况下通过经纬度获取对应的位置信息都是通过代码调用百度逆地理解析接口,今天发现一个百度网页页面可以通过经纬度定位位置; 一、进入百度地图拾取坐标系统,勾选坐标反查。 链接:... -
手机端网页使用html5地理定位获取位置失败的解决办法
2019-10-01 18:49:57网上有很多关于html5 geolocation 获取地理定位的方法,我试了下,只有在IE edge浏览器可以成功获取到,在chrome,firefox,手机端的safari,QQ浏览器,微信浏览器,... -
如何在网页上获取用户的当前位置[仅限移动端网页]
2017-08-15 15:16:23//通过baiduMap API获取街道名称 var map = new BMap.Map("allmap"); var point = new BMap.Point(lng,lat); var gc = new BMap.Geocoder(); gc.getLocation(point, function(rs){ var addComp = ... -
微信网页授权之地理位置获取----微信js-sdk
2017-11-28 17:19:00我们通过微信浏览器打开页面时,有时会提示要获取地理位置信息.点击同意后,自己的地理位置信息就会相应的显示在页面,同时通过数据库的查询,以实现以地理位置分类的逻辑业务. 本例通过thinkphp5来完成,下面介绍... -
web端获取经纬度,并使用腾讯地图获取实时位置信息
2020-07-13 22:04:19电脑端可能无法获取,通过真机调试能获取 判断浏览器是否支持 if(navigator.geolocation) { navigator.geolocation.... 浏览器获取高精度的位置,默认为false enableHighAccuracy:true, 获取地理位置超时时间 ti -
用VBA实现网页数据获取
2021-06-12 16:19:30做某个学校大作业的时候,需要查接近$500$个数据;...利用插件可以实现各种数据的获取和处理,并最终将数据存到Excel中如果根据教程正确完成安装后,点开Excel的“开发工具”选项,就能发现“”VB编辑器”选项已经是... -
微信公众平台开发网页获取用户地理位置
2016-08-04 21:40:22在这篇微信公众平台开发教程中,我们将介绍如何在网页中获取用户的地理位置信息。 本文分为以下二个部分: 生成JS-SDK权限验证签名使用地理位置接口获取坐标 一、微信JS-SDK 1. 获得Access Token access ... -
微信 网页开发 获取地理位置 高德地图显示
2018-09-20 15:41:541、微信中获取地理位置经纬度 wx.getLocation({ type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02' success: function (res) { const latitude = res.latitude... -
js获取元素位置坐标的方法
2021-06-09 03:14:24js获取DIV的位置坐标的方法大概有两种: 第一种:编辑代码:var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect().left); alert(odiv.getBoundingClientRect().top); 第二种:编辑代码... -
安卓模拟器上无法获取位置信息解决办法
2021-01-10 21:41:26项目实训的时候模拟器上没有定位信息,只有真机上才能显示,所以一直就使用真机调试,以为是百度sdk的毛病,一直到项目结束都没解决。今天误打误撞发现了这个毛病。 擦,真机上的定位功能一直是默认打开的,所以定位... -
模拟鼠标点击屏幕任意位置并获取当前位置坐标
2012-11-06 21:22:08程序前台透明拖动窗体至想点击位置 并单击该位置 程序将自动点击该位置两次, 有源码方便更改次数,并且可以获取点击位置的坐标,做此软件意图为实现自动点击刷访问量程序有待完善 -
易语言 获取网页文本
2021-06-09 04:33:32怎么样在网页上读取一个TXT文本呢?然后显示在我的程序上。...参数 起始搜寻位置, 整数型, 可空 .局部变量 pos1, 整数型 .局部变量 pos2, 整写入代码,代码里面的网址就是图片的地址,需要自己去查找。图片框... -
微信公众号获取用户地理位置
2018-09-14 10:59:57很久没搞微信的js-sdk了, 搞了一下午, 刷新页面老是失败, 没想到结合经验给大家展示下获取用户地理位置 第一步:登录微信公众号https://mp.weixin.qq.com 首先先设置最基本的配置(这一步大家应该都会) 第二... -
C++获取网页内容
2018-08-03 10:20:03最近帮做个小程序,获取指定的网页内容,其实这很好办。 第一种windows平台可以使用MFC自带的库(别人要求要用windows平台),使用libcurl配置起来麻烦,第二种linux平台直接使用强大的libcurl,linux很容易使用... -
js获取div的位置坐标
2012-05-19 19:28:51js获取指定位置的div坐标,方便用户得到网页上的任何div元素的坐标位置 -
vue移动端进入页面获取当前地理位置实现方法
2019-02-25 18:20:11话不多说,直接写方法步骤,需要的直接拿去放在自己项目中即可使用 ...-- 获取地理位置 --> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=d4332e5adb8b... -
微信公众平台网页开发实战--3.利用JSSDK在网页中获取地理位置
2017-06-19 21:02:01在移动互联网时代,所有的操作都碎片化、移动化了,因此用户的需求更是不易把握。在一些数据测量分析工具中、在一些位置应用中(足迹、跑步类等),地理位置有着不可动摇的地位。 -
PC端网页使用微信扫码获取用户精确地理位置的一种解决方案[未测试]
2019-03-26 15:59:00navigator.geolocation获取GPS坐标,调用高德地图API获取对应地理位置信息。 navigator.geolocation.getCurrentPosition( function (position) { var gg_lon = position.coords.longitude; var gg_lat = ... -
Java微信公众号开发之网页授权获取用户基本信息
2019-02-25 16:49:07微信公众号开发,需要用到网页授权获取用户信息,通过OAuth2.0网页授权机制,来获取用户基本信息,进而实现自己的业务逻辑。(前提条件:公众号为服务号,且通过认证),我的项目开发就是已认证的服务号,写这篇文章的...