Written in the front: The blogger is a "small pig" who has devoted himself to training after actual combat development experience. The nickname is taken from "Peng Peng" in the cartoon "The Lion King". He always treats his surroundings with an optimistic and positive attitude. thing. My technical route has gone from a Java full-stack engineer all the way to the field of big data development and data mining. Now I have a small success. I would like to share what I have gained in the past with you, and I hope it will be helpful to you on the road of learning. At the same time, the blogger also wants to build a complete technical library through this attempt. Any abnormalities, errors, and precautions related to the technical points of the article will be listed at the end. Everyone is welcome to provide materials in various ways.
- Please criticize and point out any errors in the article and make sure to correct them in time.
- If you have any questions you want to discuss and learn, please contact me: [email protected].
- The style of publishing articles varies from column to column, and they are all self-contained. Please correct me for any deficiencies.
Tencent Location-Address Resolution
Keywords in this article: Tencent location, address resolution, server, tutorial
Article Directory
1. Function introduction
The address resolution interface can query a specific location based on the address description. If the query is successful, the returned result is unique, mainly through the resolution accuracy level (a total of 11 levels) to determine whether the coordinates are accurate.
2. Key application
1. User login
Open the homepage of Tencent Location Service: https://lbs.qq.com , click the login button in the upper right corner:
2. Verification Information
Click on the control panel, enter the personal center -> my information to complete the verification.
3. Application key
Click on My Apps under App Management on the left :
Click Create Application , fill in the application name , and select the application type :
After the creation is successful, you can view the key information on the management interface:
4. Key configuration
After the key application is passed, you can click the edit button to add a description, and you can select the enabled products and restrict the calling rules:
At the same time, you can check the usage of each interface in Quota Management -> My Quota :
Three, operation steps
1. Development document entry
Swipe to the development document in the upper menu -> select WebService API under the server : Click on the address resolution (address to coordinates) on the left :
Direct address: https://lbs.qq.com/service/webService/webServiceGuide/webServiceGeocoder
2. Interface test
You can use the Postman tool to test directly, or use Postwomen (Postman's girlfriend, alas, even the tools are double-entry, and you will be abused when you write a code, just work hard).
According to the documentation, the request type of the interface is GET , and the default data return format is JSON . In addition to the developer key, the address field is required, and the address in the document is recommended to include the city name .
3. Return results
This interface is suitable for specific and relatively complete name information. Because the returned result is unique, if only part of the key information is provided, the returned result may deviate greatly from the expected result.
{
"status": 0,
"message": "query ok",
"result": {
"title": "ECO中科爱克大厦",
"location": {
"lng": 116.331284,
"lat": 39.980824
},
"ad_info": {
"adcode": "110108"
},
"address_components": {
"province": "北京市",
"city": "北京市",
"district": "海淀区",
"street": "",
"street_number": ""
},
"similarity": 0.8,
"deviation": 1000,
"reliability": 7,
"level": 10
}
}
The meaning of the fields can be seen in the following table (can be found in the interface document):
level resolution level table:
Four, use cases
When using the address resolution interface, it is mainly used to mark the location more accurately on the map, and it is generally used when converting an existing specific address into a coordinate. If you combine user operations and ensure the accuracy of the results, you can use the keyword prompt interface to help complete the address information. You can refer to the following article:
- Tencent Location-Introduction to Map Construction (video at the end)
- Tencent Location-Keyword input prompt (with video at the end)
1. Function integration
First build a basic map, and at the same time integrate the keyword prompt function, and define a function button:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#container {
/*地图(容器)显示大小*/
width: 800px;
height: 400px;
}
</style>
<!--引入css样式文件-->
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />
<!--引入所需的jquery库文件-->
<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<!--引入jquery-ui文件-->
<script src="js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$("#search").autocomplete({
//为文本框完成绑定
source: function(request, response) {
//从request对象中获得文本框内容
var keyword = request.term;
//定义数组，封装最终结果
var obj = [];
$.ajax({
url: "https://apis.map.qq.com/ws/place/v1/suggestion",
type: "get",
dataType: "json",
async: false, //关闭异步
data: {
"key": "替换为自己的key",
"keyword": keyword,
"region": "北京"
},
success: function(resp) {
for (i in resp.data) {
//此处可以根据需要自定义要显示的内容以及封装的数据
obj.push({
"label": resp.data[i].title + "[" + resp.data[i].province + "-" + resp.data[i].city + "-" + resp.data[
i].district + "]",
//此处补全城市信息
"value": resp.data[i].city + resp.data[i].title
});
//label为提示显示的内容
//value为选中后补全出现在文本框中的内容
}
}
});
//将obj最为结果返回
response(obj);
}
});
});
</script>
<!--引入Javascript API GL，参数说明参见下文-->
<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;
//定义全局变量markerLayer
var markerLayer;
//地图初始化函数
function initMap() {
//调用 TMap.Map() 构造函数创建地图
map = new TMap.Map(document.getElementById('container'), {
center: center,//设置地图中心点坐标
zoom: 18, //设置地图缩放级别
pitch: 43.5, //设置俯仰角
rotation: 45 //设置地图旋转角度
});
//初始化MultiMarker
markerLayer = new TMap.MultiMarker({
map: map//指定地图容器
});
}
// 页面加载完成后执行
$(function(){
//初始化显示地图
initMap();
//解析按钮点击事件绑定
$("#coder").click(function(){
//获取信息，在地图上进行标记(同时挪动中心点)
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="search">搜索框: </label>
<input type="text" id="search" style="width: 300px;">
<input type="button" id="coder" value="解析" />
</div>
<br />
<!-- 定义地图显示容器 -->
<div id="container"></div>
</body>
</html>
The effect is as follows:
2. Map echo
Enter the content in the search box, complete according to the prompts, and click the resolve button to move the center point and display the marker on the map.
$("#coder").click(function(){
//获取信息，在地图上进行标记(同时挪动中心点)
var address = $("#search").val();
$.ajax({
url:"https://apis.map.qq.com/ws/geocoder/v1/",
type:"get",
dataType:"json",
data:{
"key":"替换为自己的key",
"address":address
},success:function(resp){
var lat = resp.result.location.lat;
var lng = resp.result.location.lng;
//重新设置中心点
map.setCenter(new TMap.LatLng(lat,lng));
markerLayer.add({
"id": 1,//此处为单次测试时使用，实际项目中注意区分
"styleId": 'marker',//内置样式，可直接使用
//指定放置位置
"position": new TMap.LatLng(lat, lng)
});
}
});
});
The effect is as follows:
