1. What is Tencent Location Service

Tencent’s location service offers a wide variety of services, including location, mapping, location toggle, navigation, and more. Tencent Location Services provides developers with rich forms of map presentation on multiple platforms, helping developers from different fields to easily complete the construction of maps and create exclusive content on the basis of it. At the same time, with massive data, personalized customization, visualization and other capabilities to meet the needs of maps in various industrial scenarios.

II. How to use Tencent location service API

**a. Register as a developer

B. Request a key and create a new key ** at the location shown in the figure

C. Configure

Recommends to use authorized IP configuration, write your personal IP into the input box on the OK!

3 Official API usage example (JavaScript)

3.1 Find the location of individual company through the search interface:

https://apis.map.qq.com/ws/pl… Jiayu International & Boundary = Region (Shanghai,0)

Change the key to yours

The company location is (31.329716,121.508386)

3.2 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.

3.3 Label 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>

3.4 Make the marked 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>

4. Use the clocking function of Tencent location service API

4.1 Implementation Ideas

4.1.1 Location search

Interface: https://apis.map.qq.com/ws/pl…

Search for Shanghai The location of the Shanghai wujiaochang subway station example: https://apis.map.qq.com/ws/place/v1/search?keyword= wujiaochang subway station & boundary = region (Shanghai, 0)

&key=HLSBZ–

Search results intercepted: {” id “:” 10804093066539767491 “, “title” : “Wujiaochang [subway station]”, “address” : “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.

4.1.2 Positioning (Android Positioning)

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 document of Tencent’s location service. After getting the location, it is passed to the background interface.

4.1.3 Background 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); }

5. Overall introduction of Tencent location services



You can see that Tencent location services have provided a set of development interface for each terminal, go to learn!

Originally written by: the interest of the program ape