How to use Tencent Location service API

1. Register as a developer

2. Apply for the key and create a new key in the position shown in the figure

3. Configure

Official Api Usage Examples (JavaScript)

Find individual company location via search interface:

Apis.map.qq.com/ws/place/v1… &key= The key of your application

The company location is (31.329716,121.508386).

Initialize the map with the center set as 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{/* display size */ 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 map.latLNG (31.329716, 121.508386); var center = new map.latLNG (31.329716, 121.508386); Var map = new map.map (document.getelementById ('container'), {center: ViewMode :'2D',// Set the display mode 2D 3D can change the zoom level: 17.2, // Set the map zoom level: pitch: 43.5, // Set the pitch Angle: 45 // Set map rotation Angle}); } </script> </head> <! <body onload="initMap()"> <! - define the map shows the container -- > < div id = "container" > < / div > < / body > < / HTML >Copy the code

Effect display:

The position of the annotation is the center of the setting.

Label the company location location

Examples of effects:

Add the position of the company to the picture written in 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, Function initMap() {var center = new map.latLNG (31.329716, 121.508386); // Create a map object and initialize the map. Var map = new map.map (document.getelementById ('container'), {center: center, zoom: 17.2, // Set the map zoom level pitch: Rotation: 45 // Set the map rotation Angle}); MultiMarker var markerLayer = new tmap. MultiMarker({map: map, // specify map container // style: {// Create a style with a styleId of "myStyle" (styles' child attribute name is styleId) "myStyle": new map.markerstyle ({"width": 25, // mark style width (pixel) "height": 35, // mark style height (pixel) "SRC ": "Anchor ": {x: 16, y: {x: 16, y: {x: 16, y: {"id": "1", "styleId" is a unique identifier that can be used to delete or modify positions: 'myStyle', // specify the style ID "position": new map.latLNG (31.329716, 121.508386), // mark the coordinate position" properties": {// customize the attribute "title": "My company"}}]}); } </script>Copy the code

Make the marked dots move

The move path is defined using the moveAlong method, which passes in the move path and coordinate points, which are tokens in geometries.

<script> // Map initialization function, in this case called init, you can define function initMap() {// create map object, Var center = new map.latLNG (31.329716, 121.508386); Var map = new map.map (document.getelementById ('container'), {center: center, zoom: 17.2, // Set the map zoom level pitch: Rotation: 45 // Set the map rotation Angle}); Var marker = new tmap. MultiMarker({map: map, // specify map container // style: {// Create a style with a styleId of "myStyle" (styles' child attribute name is styleId) "myStyle": new map.markerstyle ({"width": 25, // mark style width (pixel) "height": 35, // mark style height (pixel) "SRC ": "Anchor ": {x: 16, y: {x: 16, y: {x: 16, y: {"id": "person", "styleId" is a unique identifier that can be used to delete or change positions: 'myStyle', // specify the style ID "position": new map.latLNG (31.329716, 121.508386), // mark the coordinate position" properties": {// customize the attribute "title": "My company"}}]}); Var path = [new Map.latLNG (31.329716, 121.508386), new Map.latLNG (31.330720, 121.508388), LatLng(31.349725, 121.508389), LatLng(31.359730, 121.508389), LatLng(31.369718, 121.518400)]; Marker. MoveAlong ({person": {path, // speed is 100 speed: (autoRotation:true)} </script>Copy the code

Using Tencent location service API card function

Implementation approach

Location search

Interface: apis.map.qq.com/ws/place/v1…

Search the location of Shanghai Wujiaochang subway station

Example: apis.map.qq.com/ws/place/v1…

Search result interception:

{" 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"}}Copy the code

Now you know the latitude and longitude of the Pentagram subway station.

Notice that key is the string of ids that you created

Through the search out is a List, the above only took out the List of the first, usually the first is also mouth and search keywords consistent. Search for our fixed latitude and longitude addresses.

Positioning (Android positioning)

Obtain the current device location for a single location

mLocationManager.requestSingleFreshLocation(null, mLocationListener, Looper.getMainLooper());
Copy the code

For other IOS devices, you can view the official documents linked to the official website.

After the location is obtained, the location is transmitted 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); }Copy the code

Tencent location services overall introduction

To Tencent location services: official website after registration to find the official documentation: official website

Tencent location service has provided a set of development interfaces for each terminal, you can refer to learn.

Author: A programmer of interest

Link: binhao.blog.csdn.net/article/det…

Source: CSDN

Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.