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 deficiencies.
Tencent Location-Location Search (with video at the end)
Keywords in this article: Tencent location, location search, server, tutorial
Article Directory
1. Function introduction
The location search interface can provide search functions of three types of scope conditions:
- Location search in designated cities: More specific location search
- Location search in circular area: mainly used for surrounding search, starting from the center point
- Location search in rectangular area: can be used for field of view search, the display area is rectangular
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 the console to enter the developer information interface, complete the basic user information, and complete the verification.
3. Application key
Click the key management under the key and quota on the left :
click to create a new key , fill in the key name, description, and verification code, and wait for the approval:
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 Settings button to modify the name and description, and you can select the enabled products and restrict the calling rules:
At the same time, you can view the usage of each interface in the view quota interface:
Three, operation steps
1. Development document entry
Swipe to the development document in the upper menu -> select WebService API under the server : click the location on the left to search : direct address: https://lbs.qq.com/service/webService/webServiceGuide/webServiceSearch
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 , the default data return format is JSON , and a callback function can be set (return using JSONP). The following describes the boundary parameter, which is a required parameter, which corresponds to the three types of range conditions at the beginning of the article.
- Specify area name
The format is: region(city_name[,auto_extend][,lat,lng])
city_name : 【必填】city name, while supporting administrative division codes (can be accurate to the district/county level)
auto_extend : 【选填】whether to automatically expand the search, the default is 1 (the current city has no results Automatic expansion), can be manually set to 0 (no expansion)
lat,lng : 【选填】center point coordinates, take this as the center, return the nearest result
- Search around
The format is: nearby(lat,lng,radius[,auto_extend])
lat,lng : 【必填】center point coordinates, equivalent to the search center
radius : 【必填】search radius, in meters, the value range is 10-1000
auto_extend : 【选填】whether to automatically expand the search, The default is 1 (sequentially search by 1km, 2km, 5km, up to the entire city), and can be manually set to 0 (not expanded)
- Rectangle search
The format is: rectangle(lat,lng,lat,lng)
lat,lng -first group: 【必填】lower left corner/southwest direction coordinate point
lat,lng -second group: 【必填】upper right corner/northeast direction coordinate point
3. Return results
The following is the returned result. In order to fully display the data structure, some data in data has been deleted:
{
"status": 0,
"message": "query ok",
"count": 1433,
"request_id": "123122181103411eebc381494197ae6493561a3bc676",
"data": [
{
"id": "2688340099880903279",
"title": "北京华联(万柳购物中心)",
"address": "北京市海淀区巴沟路2号",
"tel": "010-82589600;010-82589617",
"category": "购物:超市",
"type": 0,
"location": {
"lat": 39.972948,
"lng": 116.294937
},
"ad_info": {
"adcode": 110108,
"province": "北京市",
"city": "北京市",
"district": "海淀区"
}
},
{
"id": "7771158446150442692",
"title": "华联商厦(望京店)",
"address": "北京市朝阳区广顺北大街33号望京凯德MALL",
"tel": "010-84771188",
"category": "购物:综合商场:购物中心",
"type": 0,
"location": {
"lat": 39.992453,
"lng": 116.468771
},
"ad_info": {
"adcode": 110105,
"province": "北京市",
"city": "北京市",
"district": "朝阳区"
}
}
],
"region": {
"title": "北京市"
}
}
The meaning of the fields can be seen in the following table (can be found in the interface document):
Four, use cases
The use of the returned result is generally used directly on the map to perform a punctuation effect. The following will take the surrounding search as an example to mark the returned search results on the map to make a complete display effect.
Friends who have never been in contact with map construction can enter the portal: Tencent Location-Introduction to Map Construction (video at the end)
1. Basic interface
Take a simplest functional interface as an example. First, an initial position is displayed, and the coordinates to the center point can be obtained. At the same time, provide a text box to fill in the search content, and then use a button to submit, request the interface and return the data.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
#container {
/*地图(容器)显示大小*/
width: 800px;
height: 400px;
}
</style>
<!--引入jQuery，案例功能所需-->
<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></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: 15, //设置地图缩放级别
pitch: 43.5, //设置俯仰角
rotation: 45 //设置地图旋转角度
});
//初始化MultiMarker
markerLayer = new TMap.MultiMarker({
map: map//指定地图容器
});
}
// 页面加载完成后执行
$(function(){
//初始化显示地图
initMap();
//搜索按钮点击事件绑定
$("#search").click(function(){
//在次方法中完成数据的请求与地图标点的操作
});
});
</script>
</head>
<body>
<!-- 定义地图显示容器 -->
<div id="container"></div>
<br />
<div>
<input type="text" id="keyword" />
<input type="button" id="search" value="搜索" />
</div>
</body>
</html>
The effect is as follows:
2. Nearby search-map echo
Next, we search the supermarket around the current coordinates, and set to display only 3 results first. The relevant code is completed in the click event of the search button:
$("#search").click(function(){
//获取搜索框内容
var keyword = $("#keyword").val();
//获取当前中心点坐标
var lat = map.getCenter().getLat().toFixed(6);
var lng = map.getCenter().getLng().toFixed(6);
$.ajax({
url:"https://apis.map.qq.com/ws/place/v1/search",
type:"get",
dataType:"json",
data:{
//请求接口时需要的参数
"key":"替换为自己的key",
"keyword":keyword,
"boundary":"nearby(" + lat + "," + lng + ",500)",
"page_size":3
},success:function(resp){
for(i in resp.data){
//向地图中追加标记点
markerLayer.add({
"id": i, //点标记唯一标识,此处先用索引代替
"styleId": 'marker', //内置样式，可直接使用
//从返回数据中取出坐标
"position": new TMap.LatLng(resp.data[i].location.lat, resp.data[i].location.lng)
});
}
}
});
});
The final implementation effect is as follows:
For the settings such as the style of the mark point, you can refer to the official document for detailed settings according to the needs of the project.
Five, direct video
Video address: https://www.bilibili.com/video/BV1wK4y1s7dS , your favorite friends must pay attention to it three times~
Tencent Location-Location Search
Written at the end: The author strives to refine each knowledge point, and will use portal mount links for related knowledge points. The article is displayed in the form of "text + pictures + video", all of which are done by squeezing time. I hope that you can leave a comment here and give me a thumbs up!
