手机端定位获取用户位置信息

很多时候，我们需要获取手机端用户的位置信息，当然这需要用户的同意授权才能进行获取，下面介绍下我在项目中使用的定位

由于本项目web端使用的是高德地图，因此手机端定位也使用高德的定位接口

<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>浏览器定位</title><link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/><script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的key"></script><script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<body>
<div id='container'></div>
<div id="tip"></div>
<script type="text/javascript">var map, geolocation;//加载地图，调用浏览器定位服务map = new AMap.Map('container', {resizeEnable: true});map.plugin('AMap.Geolocation', function() {geolocation = new AMap.Geolocation({enableHighAccuracy: true,//是否使用高精度定位，默认:truetimeout: 10000,          //超过10秒后停止定位，默认：无穷大buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：falsebuttonPosition:'RB'});map.addControl(geolocation);geolocation.getCurrentPosition();AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息});//解析定位结果function onComplete(data) {var str=['定位成功'];str.push('经度：' + data.position.getLng());str.push('纬度：' + data.position.getLat());if(data.accuracy){str.push('精度：' + data.accuracy + ' 米');}//如为IP精确定位结果则没有精度信息str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));var point = data.position.getLng()+","+data.position.getLat();poiToaddress(point);document.getElementById('tip').innerHTML = str.join('<br>');}//解析定位错误信息function onError(data) {document.getElementById('tip').innerHTML = '定位失败';}//坐标点转地址
function poiToaddress(poi) {AMap.plugin(["AMap.Geocoder"], function () {var geocoder = new AMap.Geocoder({city: "0315", //城市，默认：“全国”radius: 500 //范围，默认：500,以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息 });geocoder.getAddress(poi, function (status, result) {if (status === 'complete' && result.info === 'OK') {var address = result.regeocode.formattedAddress; //返回地址描述address2point(address); console.log("地址：："+address);}});})
}//地址转坐标
function address2point(address) {AMap.plugin(["AMap.Geocoder"], function () {var geocoder = new AMap.Geocoder({city: "0315", //城市，默认：“全国”radius: 500 //范围，默认：500,以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息 });geocoder.getLocation(address, function (status, result) {if (status === 'complete' && result.info === 'OK') {var geocode = result.geocodes[0];var resultStr = geocode.location.lng + "," + geocode.location.lat;console.log(“坐标：：”+resultStr);}});})
}
</script>
</body>
</html>

让我们一起遨游在代码的海洋里！

手机端定位获取用户位置信息相关推荐

vue定位获取用户位置信息
关于定位功能尝试了很多种方法,h5定位,百度地图定位,高德地图定位,因为ip定位只能定位到城市,所以我选用的是浏览器定位.总结如下: H5定位:定位相对较准,但是部分浏览器不兼容,我主要是在手机上测试 ...
uniapp开发获取用户位置信息功能解析
uniapp开发获取用户位置信息功能解析问题描述 uniapp相关接口 1.uni.authorize 提前向用户发起授权请求. 接口描述及demo演示 2.uni.getLocation 获取当前 ...
微信服务号开发-获取用户位置信息
微信服务号开发-获取用户位置信息在微信公众号开发的中,获取用户位置信息是非常常见的功能需求,通过用户的位置信息,可以做一些地图导航,以及基于LBS的营销活动. 下面将介绍微信服务号获取用户位置信息的 ...
微信小程序获取用户位置信息并显示到地图上
1.配置地理位置用途说明在app.json中的大括号内输入 "permission": {"scope.userLocation": {"desc& ...
微信小程序—获取用户位置信息
一.使用 wx.getLocation 获取经纬度信息 1.1 在 app.json 中加入如下配置 "permission": {"scope.userLocation ...
微信小程序（uniapp）获取用户位置信息及选择位置
1. 开发前准备注册微信小程序账号并配置相关信息: 注册腾讯地图开放平台并完成应用创建等: 下载qqmap-wx-jssdk.min.js放到项目中: 2. 获取用户当前位置wx.getLocati ...
uniApp获取用户位置信息两种方法
1.使用uni.chooseLocation获取用户信息 uni.chooseLocation({success: (res) => {console.log('位置名称:' + res.nam ...
微信小程序获取用户位置信息
1.在 app.json 里面增加 permission 属性配置小程序配置 | 微信开放文档 "permission": {"scope.userLocation&qu ...
uniapp微信小程序：点击按钮先判断用户是否授权位置信息、用户位置信息授权、进入下一个页面
文章目录前言一.创建点击事件的方法二.判断用户是否授权位置三.弹出位置授权框四.坐标到坐标所在位置的文字描述的转换(逆地址解析) 五.拒接授权后再次点击按钮跳转到允许访问位置设置总结前言 ...

手机端定位获取用户位置信息

手机端定位获取用户位置信息相关推荐

最新文章

热门文章