写在前面:博主是一只经过实战开发历练后投身培训事业的“小山猪”,昵称取自动画片《狮子王》中的“彭彭”,总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域,如今终有小成,愿将昔日所获与大家交流一二,希望对学习路上的你有所助益。同时,博主也想通过此次尝试打造一个完善的技术图书馆,任何与文章技术点有关的异常、错误、注意事项均会在末尾列出,欢迎大家通过各种方式提供素材。
本文关键字:腾讯位置、逆地址解析、服务端、使用教程
逆地址解析接口可以提供由坐标到坐标所在位置的文字描述的转换,并可以返回地理位置信息和附近POI列表,返回的数据中包含丰富的信息。
打开腾讯位置服务主页:https://lbs.qq.com,点击右上角的登录按钮:
点击控制台,进入个人中心 -> 我的信息完成验证。
点击左侧应用管理下的我的应用:
点击创建应用,填写应用名称,选择应用类型:
创建成功后,可以在管理界面查看到密钥信息:
密钥申请通过后,可以点击编辑按钮添加描述,并可以选择启用的产品,以及对调用规则进行限制:
同时,可以在配额管理 -> 我的额度查看各接口的用量情况:
滑动到上方菜单的开发文档 -> 选择服务端下的WebService API:
点击左侧的逆地址解析(坐标位置描述):
直达地址:https://lbs.qq.com/service/webService/webServiceGuide/webServiceGcoder
可以直接使用Postman工具来测试,或者使用Postwomen(Postman他女朋友,唉,连工具都成双入对了,写个代码都要被虐,罢了,好好打工)。
由文档可知,接口的请求类型为GET,默认的数据返回格式为JSON。必填参除了开发者密钥还有location字段。
接口的返回包括转换后的各级详细信息,如果开启周边信息(使用get_poi参数)则还会返回一个POI数组,在使用时可以提取出较为丰富的信息。
{
"status": 0,
"message": "query ok",
"request_id": "3105df40-615b-11eb-8a15-525400330ffb",
"result": {
"location": {
"lat": 39.907893,
"lng": 116.396885
},
"address": "北京市东城区东长安街",
"formatted_addresses": {
"recommend": "天安门南",
"rough": "天安门南"
},
"address_component": {
"nation": "中国",
"province": "北京市",
"city": "北京市",
"district": "东城区",
"street": "东长安街",
"street_number": "东长安街"
},
"ad_info": {
"nation_code": "156",
"adcode": "110101",
"city_code": "156110000",
"name": "中国,北京市,北京市,东城区",
"location": {
"lat": 39.916668,
"lng": 116.434578
},
"nation": "中国",
"province": "北京市",
"city": "北京市",
"district": "东城区"
},
"address_reference": {
"street_number": {
"id": "",
"title": "",
"location": {
"lat": 39.907883,
"lng": 116.407722
},
"_distance": 1,
"_dir_desc": ""
},
"crossroad": {
"id": "640275",
"title": "东长安街/西长安街(路口)",
"location": {
"lat": 39.907681,
"lng": 116.395714
},
"_distance": 97.6,
"_dir_desc": "东"
},
"town": {
"id": "110101001",
"title": "东华门街道",
"location": {
"lat": 39.923271,
"lng": 116.396828
},
"_distance": 0,
"_dir_desc": "内"
},
"street": {
"id": "5138301611741736025",
"title": "东长安街",
"location": {
"lat": 39.907883,
"lng": 116.407722
},
"_distance": 1,
"_dir_desc": ""
},
"landmark_l2": {
"id": "15103389097764433256",
"title": "天安门",
"location": {
"lat": 39.908821,
"lng": 116.397469
},
"_distance": 28.1,
"_dir_desc": "南"
}
}
}
}
在直接调用接口的时候来获取数据是比较简单的。如果希望在地图上滑动查看后,直接显示相关信息(包括地址及坐标),可以先自己模拟一个坐标拾取器,实时获取坐标点,然后再调用接口查询地址信息。
没接触过地图构建的小伙伴可以进入传送门:腾讯位置 - 地图构建入门(结尾附视频)。
首先构建一个基本的地图,并绑定鼠标滑动事件,能够将当前对应的坐标信息直接标记在地图上,代码如下:
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
#container {
/*地图(容器)显示大小*/
width: 800px;
height: 400px;
}
style>
<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8">script>
<script src="https://map.qq.com/api/gljs?v=1.exp&key=替换为自己的key">script>
<script>
//定义初始中心点坐标
var center = new TMap.LatLng(40.046394, 116.285335);
//定义全局变量map
var map;
//地图初始化函数
function initMap() {
//调用 TMap.Map() 构造函数创建地图
map = new TMap.Map(document.getElementById('container'), {
center: center, //设置地图中心点坐标
zoom: 17, //设置地图缩放级别
pitch: 43.5, //设置俯仰角
rotation: 45 //设置地图旋转角度
});
}
// 页面加载完成后执行
$(function() {
//初始化显示地图
initMap();
//初始化label
var label = new TMap.MultiLabel({
id: 'label-layer',
map: map,
styles: {
//样式可以进行自定义
'label': new TMap.LabelStyle({
'color': '#3777FF', //颜色属性
'size': 20, //文字大小属性
'offset': {
x: 0,
y: 0
}, //文字偏移属性单位为像素
'angle': 0, //文字旋转属性
'alignment': 'center', //文字水平对齐属性
'verticalAlignment': 'middle' //文字垂直对齐属性
})
}
});
//定义事件处理方法
var mousemoveHandler = function(evt) {
var lat = evt.latLng.getLat().toFixed(6);
var lng = evt.latLng.getLng().toFixed(6);
label.updateGeometries([{
'id': 'label_1', //点图形数据的标志信息
'styleId': 'label', //样式id
'position': new TMap.LatLng(lat, lng), //标注点位置
'content': lat + ',' + lng //标注文本
}]);
}
var mouseleaveHandler = function(evt) {
label.remove(['label_1']);
}
var clickHandler = function(evt){
var lat = evt.latLng.getLat().toFixed(6);
var lng = evt.latLng.getLng().toFixed(6);
//此处调用接口查询数据,在地图上进行文本标记
}
//Map实例创建后,通过on方法绑定点击事件
map.on("mousemove", mousemoveHandler);
map.on("click",clickHandler);
//鼠标移出地图区域后清除label
$("#container").on("mouseleave", mouseleaveHandler);
});
script>
head>
<body>
<div id="container">div>
body>
html>
效果:
接下来补全点击事件,在调试完成后,如果不需要实时显示坐标,可以移除鼠标滑动事件。
var clickHandler = function(evt){
var lat = evt.latLng.getLat().toFixed(6);
var lng = evt.latLng.getLng().toFixed(6);
//此处调用接口查询数据,在地图上进行文本标记
$.ajax({
url:"https://apis.map.qq.com/ws/geocoder/v1/",
type:"get",
dataType:"json",
data:{
"key":"替换为自己的key",
"location":lat + "," + lng
},success:function(resp){
//在地图上放置另一个标记,注意区分id
label.updateGeometries([{
'id': 'label_2', //点图形数据的标志信息
'styleId': 'label', //样式id
'position': new TMap.LatLng(lat, lng), //标注点位置
'content': resp.result.address//标注文本
}]);
}
});
}
效果如下:
移除鼠标滑动事件后:
本例中只是用了返回数据中的address作为显示信息,具体效果可以进一步调整。
视频地址:https://www.bilibili.com/video/BV1uz4y1D7Eb,喜欢的小伙伴儿一定要三连加关注哦~
腾讯位置 - 逆地址解析
写在结尾:作者力求做到将每个知识点细化,并且对于有关联的知识点都会使用传送门挂载链接。文章采用:“文字 + 配图 + 视频”的方式来进行展现,均是挤时间所作,希望看到这里能留下评论点个赞,略表支持!