地理位置互相转化

最新推荐文章于 2022-10-27 10:47:33 发布

small_animation

最新推荐文章于 2022-10-27 10:47:33 发布

阅读量267

点赞数

分类专栏：地理定位地址解析接口调用文章标签： javascript jquery html5 es6 css3

本文链接：https://blog.csdn.net/small_animation/article/details/105953222

版权

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

5 篇文章 0 订阅

订阅专栏

接口调用

2 篇文章 0 订阅

订阅专栏

地址解析

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>地理位置互相转化</title>
	</head>
	<body>
		<div class="" onclick="addr()">点击经纬度转化成地址</div><br>
		<div class="" onclick="codeAddress()">点击地址进行解析成经纬度</div><br>
		<input type="text" name="" style="width: 100%;height: 30px;" id="text" value="陕西省西安市雁塔区皇家公馆" />

	</body>
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<!-- 腾讯地图 -->
	<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=秘钥"></script>
	<script type="text/javascript">
		//转化成经纬度
		var address = "陕西省西安市雁塔区皇家公馆";
		var geocoder, map, marker = null;
        geocoder = new qq.maps.Geocoder();
        function codeAddress() {
            //地址解析
            geocoder.getLocation(address);
            geocoder.setComplete(function(result) {
	            console.log(result);
				var local = "lat:"+result.detail.location.lat+" && lng:"+result.detail.location.lng
				$("#text").val(local);
            });
            //服务请求失败
            geocoder.setError(function() {
                alert("系统错误");
            });
        };

		// 逆解析转化成地址
		var local = "34.222179,108.940613";
		function addr() {
			$.ajax({
				type : 'get',
				url : 'http://apis.map.qq.com/ws/geocoder/v1',
				dataType:'jsonp',
				data : {
					key:"秘钥",//自己的开发密钥
					location:local,//经纬度坐标
					output:"jsonp" //返回格式jsonp
					},                 
				success : function(res) { 
					console.log(res)
					if(res.status == 0){
						var address = res.result.formatted_addresses.recommend;
						$("#text").val(address);
					}else {
						alert("系统错误")
					}
				},
				error : function() {
					alert("系统错误")
				}
			});
		}

		
		
	</script>
</html>

small_animation

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
地理位置互相转化

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"...
复制链接

扫一扫