preface

Recently, the company has developed a map function, which can draw the moving track of vehicles according to the longitude and latitude of vehicles and simulate the driving process of vehicles in this line. The rendering looks something like this.

Simple introduction

First, enter the Page of Tencent Location Service and register an account. After registration, we need to apply for AppKey, which will be configured in our application to use the services in SDK.

Webserver API is checked by default, we can not fill in the domain name whitelist before the launch.

Just import it in the HTML page

< script charset = "utf-8" SRC = "https://map.qq.com/api/gljs?v=1.exp&key= you just apply for key" > < / script >Copy the code

An example of completion

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta http-equiv=" x-UA-compatible "content="ie=edge"> <title> Create map </title> </head> <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script> <style type="text/css"> html, body { height: 100%; margin: 0px; padding: 0px; } #container { width: 100%; height: 100%; } </style> <body onload="initMap()"> <div id="container"></div> <script type="text/javascript"> function initMap() { var Center = new map.latLNG (39.984104, 116.307503); // Initialize the map var map = new map. map ("container", {container: 20,// Set the map rotation Angle pitch: 30, // Set the map pitching Angle (0~45) zoom: 12,// Set map zoom level center: center// set map center coordinates}); } </script> </body> </html>Copy the code

Save the above code to an HTML file, open it in a browser, and you’ll see a map like this:

Implementation requirements: Cars on the map

If we want the car to run on the map, first we have to draw a line.

By the point of attachment

So once we have a map, if we’re going to draw lines on the map we’re going to use this MultiPolyline class, polylines. Broken lines are generally used to display motion trajectories and route planning.

This class is in the way of layers to polyline single or batch drawing, as well as deleting operations. You can create, modify, delete on the map.

Var path = [new MAP.latLNG (39.98481500648338, 116.30571126937866), new Map.latLNG (39.982266575222155, 116.30596876144409), New MAP.LATLNG (39.982348784165886, 116.3111400604248), New Map.latLNG (39.978813710266024, 116.3111400604248), new MAP.latLNG (39.978813710266024, 116.31699800491333)]; Var polylineLayer = new map. MultiPolyline({map, // draw to target map // Line styles define geometries: [{styleId: 'style_blue', paths: path }], });Copy the code

Code renderings

To draw a line, you must have a point first, and the point is shown as a latitude and longitude on the map, namely new Map.latLNG (39.98481500648338, 116.30571126937866). After we have a group of points, we can connect the points and finally form a broken line.

Of course, we can also modify the first, change the color of the line, the width of the line, the width of the line, the color of the line, the way the line ends

Var polylineLayer = new map. MultiPolyline({map, // draw to target map // styles: {'style_blue': New TMap. PolylineStyle ({' color ':' # 3777 ff, / / line fill color 'width' : 3, / / line width 'borderWidth: 1, / /' borderColor line width: '# FFF', / / edge color 'lineCap' : 'round' / / line end way})}, geometries' : [{styleId: 'style_blue' paths: path}],});Copy the code

Things moving along

Will be after a line drive track, we need to add a car online between sign, and then make the car go along the line, in tencent map to add a mark on the map, you need to use the MultiMarker class, this class allows you to more marked points on the map, can be plotted on a custom icon.

Documentation for this class

var marker = new TMap.MultiMarker({ map, styles: { 'car-down': new TMap.MarkerStyle({ 'width': 40, 'height': 40, 'anchor': { x: 20, y: 20, }, 'faceTo': 'map', 'rotate': 180, 'src': 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png', }), "start": new TMap.MarkerStyle({ "width": 25, "height": 35, "anchor": { x: 16, y: 32 }, "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png' }), "end": new TMap.MarkerStyle({ "width": 25, "height": 35, "anchor": { x: 16, y: 32 }, "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png' }) }, geometries: [{ id: 'car', styleId: LatLng(39.98481500648338, 116.30571126937866),}, {"id": 'start', "styleId": 'start', "position": new tmap. LatLng(39.98481500648338, 116.30571126937866)}, {"id": 'end', "styleId": 'end', "position": new tmap.latLNG (39.978813710266024, 116.31699800491333)}]});Copy the code

Define the Mark style in styles. There are three styles: when the vehicle starts, when the vehicle moves, and when the vehicle ends. Define styles in geometries to be used there.

After completing the above step, the vehicle has appeared at the starting point of the trajectory, but will not go on its own yet, as shown in the figure

If you want to let a map go in Tencent map, need to use the moveAlong method of MultiMarker, specific usage

marker.moveAlong({
  'car': {
    path,
    speed: 250
  }
}, {
  autoRotation: true
})
Copy the code

Path is the path of marker, speed is the speed, autoRotation is whether it will rotate automatically on the way

Final effect and source code

The complete source code looks like this

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial scale=1.0"> <meta http-equiv=" x-UA-compatible "content=" IE =edge"> <title> Marker marker  charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=QSWBZ-AL2KU-4Q4VI-46ONV-26OOT-ISB5G"></script> <style type="text/css"> html, body { height: 100%; margin: 0px; padding: 0px; } #container { width: 100%; height: 100%; } </style> <body> <div id="container"></div> <script type="text/javascript"> var center = new tmap.latLNG (39.984104, 116.307503); Var map = new map. map ("container", {zoom: 15, center: center}); Var path = [new MAP.latLNG (39.98481500648338, 116.30571126937866), new Map.latLNG (39.982266575222155, 116.30596876144409), New MAP.LATLNG (39.982348784165886, 116.3111400604248), New Map.latLNG (39.978813710266024, 116.3111400604248), new MAP.latLNG (39.978813710266024, 116.31699800491333)]; Var polylineLayer = new map. MultiPolyline({map, // draw to target map // styles: {'style_blue': New map. PolylineStyle({'color': '#3777FF', // line fill color' width': 4, // line fill width' borderWidth': 2, // line fill width' borderColor': 2, // line fill width' borderColor': 2, // line fill width' borderColor': '# FFF', / / edge color 'lineCap' : 'round' / / line end way})}, geometries' : [{styleId: 'style_blue' paths: path}],}); var marker = new TMap.MultiMarker({ map, styles: { 'car-down': new TMap.MarkerStyle({ 'width': 40, 'height': 40, 'anchor': { x: 20, y: 20, }, 'faceTo': 'map', 'rotate': 180, 'src': 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png', }), "start": new TMap.MarkerStyle({ "width": 25, "height": 35, "anchor": { x: 16, y: 32 }, "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png' }), "end": new TMap.MarkerStyle({ "width": 25, "height": 35, "anchor": { x: 16, y: 32 }, "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png' }) }, geometries: [{ id: 'car', styleId: LatLng(39.98481500648338, 116.30571126937866),}, {"id": 'start', "styleId": 'start', "position": new tmap. LatLng(39.98481500648338, 116.30571126937866)}, {"id": 'end', "styleId": 'end', "position": new tmap.latLNG (39.978813710266024, 116.31699800491333)}]}); marker.moveAlong({ 'car': { path, speed: 250 } }, { autoRotation: true }) </script> </body> </html>Copy the code

End result

Write in the last

Tencent location service provides a lot of examples, if you do not know how to do a need, you can take a look at Tencent Map sample center.

If you are a master, want to do more custom extension functions, you can directly view the Tencent API documentation, which contains all the attributes of the class, method.

Akik Take my plaid shirt

Link: fizzz.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.