First, what is Tencent location service

Tencent Location services offers a variety of services, including location, map, location, and navigation. Tencent location service provides developers with rich map display forms on multiple platforms, helping developers from different fields to easily complete the work of building maps and creating 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 various industry scenarios for maps.

How to use Tencent location service API

A. Register as a developer b. Apply for a key and create a new key in the position shown in the figure C. Perform configuration Recommend the use of authorized IP mode configuration, write your personal IP into the input box is OK!

3 Official Api Examples (JavaScript)

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

Apis.map.qq.com/ws/place/v1… * * * * *

The key is yours The company location is (31.329716,121.508386)

3.2 Initialize the map with the company location in the center

<! DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Hello world! < span style =" box-sizing: border-box! Important; word-wrap: break-word! Important;" 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 > Function initMap() {var center = new tmap.latlng (31.329716, 121.508386); Var map = new map.map (document.getelementById ('container'), {center: ViewMode :'2D', viewMode:'2D', display mode :'2D 3D ', zoom: 17.2, pitch: 43.5, // set the pitch: 45 // Set the 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 location of the annotation is the center of the setting.

3.3 Mark the company location

Examples of effects:The company location is added with the image in style and the code looks like this:

< 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 map.map (document.getelementById ('container'), {center: center,// Set the map center point zoom: 17.2, // Set the map scale pitch: // Set the pitch Angle to 45 // Set the map rotation Angle}); // create and initialize MultiMarker var markerLayer = new tmap. MultiMarker({map: map, // specify the map container // styles: {// create a style with styleId as "myStyle" (style = "styleId") : new tmap.markerstyle ({"width": 25, // Dot style width (px) "height": 35, // Dot style height (px) "SRC ": "Anchor ": {x: 16, y: {x: 16, y: 32}})}, / / some tag data array geometries' : [{" id ":" 1 ", / / point marks a unique identifier, later if you have operations such as delete, modify, position, all need this id "styleId" : 'myStyle', // specify the style ID "position": new tpap.latlng (31.329716, 121.508386), // mark the coordinate position" properties": {// customize the property "title": My company}}]}); } </script>Copy the code

3.4 Make the mark dot move

Mainly by using the moveAlong method, the path of the movement is defined, and the moving route and coordinate point are passed in moveAlong. The coordinate point is the mark in geometries.

< span style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px! Important; word-break: inherit! Important;" Var Center = new tpap.latlng (31.329716, 121.508386); Var map = new map.map (document.getelementById ('container'), {center: center,// Set the map center point zoom: 17.2, // Set the map scale pitch: // Set the pitch Angle to 45 // Set the map rotation Angle}); // create and initialize MultiMarker var marker = new tmap. MultiMarker({map: map, // specify a map container // styles: {// create a style with styleId as "myStyle" (style = "styleId") : new tmap.markerstyle ({"width": 25, // Dot style width (px) "height": 35, // Dot style height (px) "SRC ": "Anchor ": {x: 16, y: {x: 16, y: 32}})}, / / some tag data array geometries' : [{" id ":" person ", / / point marks a unique identifier, later if you have operations such as delete, modify, position, all need this id "styleId" : 'myStyle', // specify the style ID "position": new tpap.latlng (31.329716, 121.508386), // mark the coordinate position" properties": {// customize the property "title": My company}}]}); Var path = [new tmap.latlng (31.329716, 121.508386), new tmap.latlng (31.330720, 121.508388), New tmap.latlng (31.349725, 121.508389), new Tmap.latlng (31.359730, 121.508389), new Tmap.latlng (31.369718, 121.508389) 121.518400)]; Marker. MoveAlong ({"person": {path, // speed: 100) 100}}, {autoRotation:true})} </script>Copy the code

4. Use Tencent location service API punch function to achieve

4.1 Implementation Process

4.1.1 Location search

Interface: apis.map.qq.com/ws/place/v1… Search for Shanghai The location of the Shanghai wujiaochang subway station example: apis.map.qq.com/ws/place/v1… &key=HLSBZ–

{” id “:” 10804093066539767491 “, “title” : “wujiao Chang [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 longitude and latitude of wujiaochang Subway station, which is the two values of Location. Notice that the key is the set of ids that we createdThe search results in a List. Above, only the first part of the List is taken out. Usually, the first part is also the mouth that matches the search keyword. Retrieve our fixed latitude and longitude address by search.

4.1.2 Location (Android Location)

Obtain the current device location once

mLocationManager.requestSingleFreshLocation(null, mLocationListener, Looper.getMainLooper());

Copy the code

Other IOS devices can be viewed through the Tencent location service official document. After the location is obtained, the location is transmitted 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; 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 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

5 overview of Tencent location services

You can see that Tencent location services has provided a set of terminals for the development of interfaces, go to learn!

Original article author: interested programmer ape