Moment For Technology

How to use Tencent location service API to achieve the clocking function?

Posted on Dec. 1, 2022, 2:08 p.m. by Jeffrey Warren
Category: The front end Tag: The front end api gis

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" titleHello 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.expkey=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.expkey=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}}]}); } /scriptCopy 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})} /scriptCopy 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 MapString,Double queryDistance(Double lat,Double lng){ HashMapString, 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

Search
About
mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.