获取经纬度及转化地理位置

最新推荐文章于 2024-11-21 18:18:27 发布

small_animation

最新推荐文章于 2024-11-21 18:18:27 发布

阅读量1.4k

点赞数

分类专栏：地理定位 js

本文链接：https://blog.youkuaiyun.com/small_animation/article/details/103350407

版权

地理定位同时被 2 个专栏收录

5 篇文章

订阅专栏

3 篇文章

订阅专栏

本文介绍了如何使用腾讯地图API获取用户地理位置，并通过百度地图API将经纬度转换为具体地址，实现位置服务功能。文章详细展示了JavaScript代码实现过程，包括初始化地图秘钥、获取地理位置、错误处理及经纬度转地址等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
			//AK-个人腾讯地图秘钥
			var geolocation = new qq.maps.Geolocation("AK", "h5");
			var options = {timeout: 8000};
			geolocation.getLocation(showPosition, showErr, options);
			function showPosition(position) {
			    var info = JSON.stringify(position, null, 4);
			    var lat = position.lat;
				var lng = position.lng;
				var city = position.city;
				// console.log(lat)
				// console.log(lng)
				if(lat&&lng){
					// 储存当前的经纬度
					localStorage.setItem("lat",lat);
					localStorage.setItem("lng",lng);
					console.log(localStorage.getItem("lat"))
					console.log(localStorage.getItem("lng"))
				}else{
						console.log("获取失败")
				};
			};
			function showErr() {
				// mui.alert('定位失败，请启用位置服务');
			};
		});
		// 将经纬度转成地理位置
		showPositions();
		function showPositions(position){ 
		   //将我们获取到的经纬度保存到变量中
		  var latlon = localStorage.getItem("lat")+','+localStorage.getItem("lng"); 
		 
		  //baidu接口
		  //个人百度AK
		  var url = "https://api.map.baidu.com/geocoder/v2/?ak=秘钥&callback=renderReverse&location="+latlon+"&output=json&pois=0";
		  $.ajax({ 
		    type: "GET", 
		    dataType: "jsonp", 
		    url: url, 
		    beforeSend: function(){ 
		      console.log('正在定位...');
		    }, 
			// 百度成功调用
		    success: function (data) { 
		      if(data.status==0){ 
		         var address = data.result.formatted_address;
				 console.log(address) //打印转化地址
		       } 
		    }, 
		    error: function (XMLHttpRequest, textStatus, errorThrown) { 
		        mui.alert("地址位置获取失败"); 
		    } 
		  }); 
		};
</script>