调用腾讯地图API实现逆地址解析
查看了很多博客，发现很多都没有很好的实现给定经纬度逆地址解析的操作，于是就有了本篇文章，希望对大家有帮助！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
</head>
<body>
<h2>经度：<span></span></h2>
<h2>纬度：<span></span></h2>
<h2>位置：<span></span></h2>
<h2>您附近的位置有：</h2><span></span>
</body>
<script>
let spans = document.querySelectorAll('span');
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
} else {
alert("您的浏览器不支持使用HTML 5来获取地理位置服务");
}
//定位数据获取成功响应
function onSuccess(position) {
let lat = position.coords.latitude;
let lon = position.coords.longitude;
spans[0].innerHTML = lat;
spans[1].innerHTML = lon;
$.ajax({
type: 'get',
url: 'https://apis.map.qq.com/ws/geocoder/v1',
dataType: 'jsonp',
data: {
key: "",//开发密钥,在腾讯地图开发者页面上注册
// location: "39.903679,116.397743",//位置坐标
location: lat + ',' + lon,
get_poi: "1",//是否返回周边POI列表：1.返回；0不返回(默认)
coord_type: "1",//输入的locations的坐标类型,1 GPS坐标
output: "jsonp"
},
success: function (data, textStatus) {
console.log(data);
if (data.status == 0) {
spans[2].innerHTML = data.result.formatted_addresses.recommend;
for(let i = 0;i<data.result.pois.length;i++){
spans[3].innerHTML += data.result.pois[i].title +'<br>';
}
} else {
alert("系统错误，请联系管理员！")
}
},
error: function () {
alert("系统错误，请联系管理员！")
}
});
}
//定位数据获取失败响应
function onError(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;
}
}
</script>
</html>
|