腾讯地图将位置转化为经纬度、获取当前定位

最新推荐文章于 2024-07-22 17:52:47 发布

欧阳(๑°3°๑)俊杰

最新推荐文章于 2024-07-22 17:52:47 发布

阅读量4k

点赞数

文章标签：获取当前位置位置转经纬度

本文链接：https://blog.csdn.net/weixin_42221197/article/details/102460579

版权

腾讯地图将位置转化为经纬度、获取当前定位、经纬度转位置

将位置转换为经纬度

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=5LOBZ-XNECQ-TGR5O-GBJBH-EPVGF-AMBYJ"></script>
		<script type="text/javascript" src="JQuery/jquery.min.js"></script>
	</head>
	<body>
		<label>输入地址</label><input type="text" onblur="codeAddress(this.value)">
		<br />
		经度<input id="lat" type="text">
		纬度<input id="lng" type="text" />
		<script>
			var geocoder, map, marker = null;
			geocoder = new qq.maps.Geocoder();
			// 输入位置,获取经纬度及国家等信息
			function codeAddress(address) {
				//var address = '中国,北京,海淀区,海淀大街38号';
				//对指定地址进行解析
				geocoder.getLocation(address);
				//设置服务请求成功的回调函数
				geocoder.setComplete(function(result) {
					console.log(result)
					var arr = eval(result);
					console.log(arr);
					var location = arr.detail.location;
					document.getElementById("lat").value = location.lat;
					document.getElementById("lng").value = location.lng;
					console.log(location);
				});
				//若服务请求失败，则运行以下函数
				geocoder.setError(function() {
					alert("出错了，请输入正确的地址！！！");
				});
			}
		</script>
	</body>
</html>

将元素滚动到底部

document.getElementById(“pos-area”).scrollTop = document.getElementById(“pos-area”).scrollHeight;

获取当前定位

在这里插入图片描述

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>前端定位模块</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
	</head>
	<body>
		<div id="demo">

		</div>
		<script type="text/JavaScript">
			var geolocation = new qq.maps.Geolocation("5LOBZ-XNECQ-TGR5O-GBJBH-EPVGF-AMBYJ", "myapp");
			// 获取精确定位,将成功则显示,失败则调用粗糙定位
			geolocation.getLocation(showPosition, geolocation.getIpLocation(cu,shibai));
			
			// 粗糙定位成功显示结果
			function cu(position){
				console.log('粗糙定位',position);
				show(position)
			}
			
			// 精确定位成功显示结果
			function showPosition(position) {
				console.log('精确定位',position);
				show(position)
			};
			
			// 定位失败
			function shibai(position){
				alert('定位失败');
				console.log('定位失败',position)
			}
			
			// 将返回内容显示在网页中
			function show(position){
				document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = JSON.stringify(position, null, 4);
			}

			//监听定位 geolocation.watchPosition(showPosition);
			//停止监听 geolocation.clearWatch();
		</script>
	</body>
</html>