Tencent Location Service JavaScript API is a map application programming interface developed by JavaScript language. On this basis, Tencent Location Service has launched its upgraded version of JavaScript API GL, which is a set of 3D map API encapsulated based on the high-performance 3D rendering engine implemented by WebGL. 3D vision is more free and interaction is smoother. This article will show how to use Tencent location service JS API to realize the function of location and map marking, and give the development example of punch card.

1. Set up an account

A. Register as a developer b. Apply for a key and create a new key in the location shown in the picture C. Configure the parameters It is recommended to use authorized IP to configure, and write your personal IP into the input box.

2. Map marking using official Api (JavaScript)

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

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

Change the key to yours The company location is (31.329716,121.508386).

2.2 Initialize the map and set the center as the location of the company

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

2.3 Mark the location of the company

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

2.4 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

3. Case: Using Tencent location service API to realize the punch function

3.1 Implementation Roadmap

3.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–

Search results: {” ID “:” 10804093066539767491 “, “title” : “Wujiaochang [metro station]”, “address” : “Metro 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 you know the latitude and longitude of the Pentagram subway station. Notice that key is the string of ids that you createdThrough 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.

3.1.2 Positioning (Android Positioning)

Obtain the current device location for a single location

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

Copy the code

Other IOS devices can be viewed through Tencent location service official documents. After the location is obtained, the location is transmitted to the background interface.

3.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); }Copy the code