How to use Tencent Location Service API
1. Register as a developer
2. Apply for a key and create a new key in the position shown in the figure
3. Configure
Official API usage example (JavaScript)
Find your personal company location through the search interface:
https://apis.map.qq.com/ws/pl… &key= the key you applied for
The company location is (31.329716,121.508386)
Initialize the map with the center set to the company location
<! DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Hello world! </title> <style type="text/ CSS "> #container{/* Map */ width:1200px; height:400px; } </style> <! -- Introducing JavaScript API GL Parameters that see below -- -- > < script SRC = "https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77" > < / script > < script > Var center = new TMap.latLNG (31.329716, 121.508386); var center = new TMap.latLNG (31.329716, 121.508386); Var map = new TMap. map (document.getElementById('container'), {center: // Set the viewMode to '2D',// Set the display mode to '2D 3D ',// Set the zoom level to '17.2 ',// Set the zoom level to' 43.5 ',// Rotate to: 45 // Set the map rotation Angle}); } </script> </head> <! > <body onload="initMap()"> <! - define the map shows the container -- > < div id = "container" > < / div > < / body > < / HTML >Effect display:
The location of the annotation is the center of the setting.
Tag the company location
Examples of effects:
The location of the company is added with the picture written in the style. The code is as follows:
< script SRC = "https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77" > < / script > < script > / / map initialization function, Var center = new TMap.latLNG (31.329716, 121.508386); var center = new TMap.latLNG (31.329716, 121.508386); Var map = new TMap. map (document.getElementById('container'), {center: center, zoom: 17.2, // set the map zoom level pitch: // Set the rotation Angle to 45}); // Create and initialize MultiMarker var markerLayer = new TMap.MultiMarker({map: map, // Specify the map container // Styles: {// create a style with a styleId of "myStyle". "myStyle": new TMap.markerStyle ({"width": 25, // Dot mark style width (pixels) "height": 35, // Dot mark style height (pixels) "SRC ": 'WeChat image _20210107230437.jpg', // Image path // The focus is pixel position in the image. For general pins, the focus is the pinhead position and the center of the circle position. "anchor": {x: 16, y: 32}})}, // Dot-mark data array geometries: [{"id": "1", // Dot-mark unique identification, delete, modify position, need this ID "styleId": 'myStyle', // Specify style id "position": new TMap.latLNG (31.329716, 121.508386), // Point mark coordinate position" properties": {// Custom property "title": "My company"}}]}); } </script>Let the dots move
The path of the movement is defined mainly by using the MoveAlong method. In MoveAlong, the path of the movement and the coordinate points are passed in. The coordinate points are the markings in Geometries.
<script> // function init () {function initMap() { Var center = new TMap.latLNG (31.329716, 121.508386); Var map = new TMap. map (document.getElementById('container'), {center: center, zoom: 17.2, // set the map zoom level pitch: // Set the rotation Angle to 45}); Var marker = new TMap.MultiMarker({map: map, // Specify map container // Styles: {// create a style with a styleId of "myStyle". "myStyle": new TMap.markerStyle ({"width": 25, // Dot mark style width (pixels) "height": 35, // Dot mark style height (pixels) "SRC ": 'WeChat image _20210107230437.jpg', // Image path // The focus is pixel position in the image. For general pins, the focus is the pinhead position and the center of the circle position. "anchor": {x: 16, y: 32}})}, // Dot-mark data array geometries: [{"id": "person", // Dot-mark unique identification, delete, modify position, need this ID "styleId": 'myStyle', // Specify style id "position": new TMap.latLNG (31.329716, 121.508386), // Point mark coordinate position" properties": {// Custom property "title": "My company"}}]}); Var path = [new TMap.latLNG (31.329716, 121.508386), new TMap.latLNG (31.330720, 121.508388), New TMap.latlng (31.359730, 121.508389), new TMap.latlng (31.369718, 121.508389), new TMap.latlng (31.369718, 121.508389), 121.518400)]; Market.moveAlong ({// make the coordinates move "person": {path, // speed: 100 speed: 100}}, {autoRotation:true})} </script>Use Tencent location service API to punch the card function
Implementation approach
Location search
Interface: https://apis.map.qq.com/ws/pl…
Search for Wujiaochang subway station in Shanghai
Example: https://apis.map.qq.com/ws/pl…
Interception of search results:
{" id ":" 10804093066539767491 ", "title" : "wujiaochang [subway]", "address" : "the subway line 10", "tel" : ""," category ": "Infrastructure: traffic facilities: subway station", "type" : 2, "location" : {" lat ": 31.298109," LNG ": 121.514651}," ad_info ": {" adcode" : 310110, "province", "Shanghai", "city", "Shanghai", "the district" : "yangpu district"}}Now we know the latitude and longitude of Wujiaochang subway station, which are the two values of Location.
Notice that the key is the set of IDs that you created
What is found through the search is a List. The above only takes out the first part of the List, which is usually matched with the search keyword. Search for our fixed latitude and longitude addresses.
Location (Android location)
A single positioning to obtain the current device position
mLocationManager.requestSingleFreshLocation(null, mLocationListener, Looper.getMainLooper());Other iOS and other devices can be viewed through the official documents linked to the above official website.
After getting the location, it is passed to the background interface.
Backend interface
Distance:
Private static final double COMPANY_LAT = 31.298109; private static final double COMPANY_LAT = 31.298109; Private static final double COMPANY_LNG = 121.514651; @GetMapping("distance") public Map<String,Double> queryDistance(Double lat,Double lng){ HashMap<String, Double> result = new HashMap<>(4); double distance = distance(COMPANY_LAT, lat, COMPANY_LNG, lng); result.put("distance",distance); return result; } public static double distance(double lat1, double lat2, double lng1, double lng1); double lng2) { final int r = 6371; double latDistance = Math.toRadians(lat2 - lat1); double lonDistance = Math.toRadians(lng2 - lng1); double a = Math.sin(latDistance / 2) * Math.sin(latDistance / 2) + Math.cos(Math.toRadians(lat1)) * Math.cos(Math.toRadians(lat2)) * Math.sin(lonDistance / 2) * Math.sin(lonDistance / 2); double c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); double distance = r * c * 1000; distance = Math.pow(distance, 2); return Math.sqrt(distance); }Tencent location service overall introduction
To Tencent location service: official website to find the official document after registration: official website
Tencent location service has provided a set of development interface for each terminal, you can refer to learn.
Author: Interest out of the program ape
Link: https://binhao.blog.csdn.net/…
Source: CSDN
The copyright belongs to the author. For commercial reprint, please contact the author for authorization. For non-commercial reprint, please note the source.