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

最新推荐文章于 2024-07-26 03:17:03 发布

龙之家

最新推荐文章于 2024-07-26 03:17:03 发布

阅读量1.4w

点赞数 6

分类专栏：网页技术文章标签：手机定位位置信息用户位置

本文链接：https://blog.csdn.net/ltaihyy/article/details/72763984

版权

网页技术专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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

由于本项目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,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition:'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>

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

龙之家

关注

6
点赞
踩
30

收藏

觉得还不错? 一键收藏
8
评论
手机端定位获取用户位置信息

很多时候，我们需要获取手机端用户的位置信息，当然这需要用户的同意授权才能进行获取，下面介绍下我在项目中使用的定位由于本项目web端使用的是高德地图，因此手机端定位也使用高德的定位接口浏览器定位 var map, geolocation; //加载地图，调用浏览器定位服务 map = new
复制链接

扫一扫