web端获取经纬度,并使用腾讯地图获取实时位置信息

电脑端可能无法获取,通过真机调试能获取

 判断浏览器是否支持   
 if(navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(locationSuccess,locationError,{
            浏览器获取高精度的位置,默认为false
            enableHighAccuracy:true,
            获取地理位置超时时间
            timeout:5000,
            有效期,在重复获取定位时,指定多久再次获取位置
            maximumAge:3000
        })
    }else{
        alert('你的浏览器不支持物理定位');
    }
	
	成功回调
    function locationSuccess(position)
    {
        var lat = position.coords.latitude; //纬度 
        var lag = position.coords.longitude; //经度 
        console.log(lat,lag);
        
    }
    
    失败回调
    function  locationError(error)
    {
        switch(error.code) { 
		case error.PERMISSION_DENIED: 
		  alert("定位失败,用户拒绝请求地理定位");
		  break; 
		case error.POSITION_UNAVAILABLE: 
		  alert("定位失败,位置信息是不可用"); 
		  break; 
		case error.TIMEOUT: 
		  alert("定位失败,请求获取用户位置超时");
		  break; 
		case error.UNKNOWN_ERROR: 
		  alert("定位失败,定位系统失效"); 
		  break; 

          } 
    }

  获取经纬度后,通过腾讯地图api获取实时位置
  	request.get({
        uri:'https://apis.map.qq.com/ws/geocoder/v1/',
        json:true,
        qs:{
        	请求需要传递的参数
            location:'纬度坐标,经度坐标',
            key:'腾讯地图key密钥'
	        }
	    },(err,response,data)=>{
	        if(response.statusCode===200)
	        {
	            console.log(data);
	            res.send(data);
	        }else{
	            res.send({msg:'定位失败'});
	        }
    })
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在web使用腾讯地图API获取用户地理位置,可以使用HTML5中的Geolocation API。以下是一些简单的步骤: 1. 注册腾讯地图开发者账号并创建应用程序,然后获取密钥。 2. 在HTML页面中嵌入JavaScript代码,使用Geolocation API请求用户位置: ```javascript if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { alert("Geolocation is not supported by this browser."); } function showPosition(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; // 调用腾讯地图API进行地理编码 } ``` 3. 在showPosition函数中,可以将用户的经纬度坐标传递给腾讯地图API进行地理编码,以获取用户位置的详细信息: ```javascript function showPosition(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; var url = "https://apis.map.qq.com/ws/geocoder/v1/?location=" + lat + "," + lng + "&key=YOUR_KEY"; fetch(url) .then(response => response.json()) .then(data => { console.log(data.result.formatted_addresses.recommend); // 显示用户位置信息 }); } ``` 在以上代码中,需要将YOUR_KEY替换为你在腾讯地图开发者账号中生成的API密钥。 4. 最后,可以将获取到的用户位置信息显示在页面上,以便用户查看。 需要注意的是,使用Geolocation API获取用户位置需要用户授权。在请求用户授权时,可以使用下面的代码: ```javascript navigator.permissions.query({name:'geolocation'}).then(function(result) { if (result.state === 'granted') { navigator.geolocation.getCurrentPosition(showPosition); } else if (result.state === 'prompt') { navigator.geolocation.getCurrentPosition(showPosition, showError); } else if (result.state === 'denied') { showError("User denied geolocation"); } }); ``` 在以上代码中,使用permissions.query()函数查询用户是否授权Geolocation API,并根据结果调用相应的函数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值