preface
Recently, the company has developed a map function, which draws the moving track of the vehicle according to the latitude and longitude of the vehicle, and simulates the driving process of the vehicle on the line. It looks something like this.
Simple introduction
First, enter the Tencent location service page and then register an account. After registration, we need to apply for AppKey, which we will configure in our application to use the services in the SDK.
WebServeAPI will be checked by default, so we can leave the domain name whitelist unchecked before we go live.
Just import it into the HTML page
< script charset = "utf-8" SRC = "https://map.qq.com/api/gljs?v=1.exp&key= you just apply for key" > < / script >An example of completion
<! 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> </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 TMap.latLNG (39.984104, 116.307503); Var map = new TMap. map ("container", {rotation: 20,// Rotate to: 0, 0, 0, 0, 0, 0, 0) 12,// Set the map zoom level center: center}); } </script> </body> </html>Save the above code in an HTML file, open it in a browser, and you’ll see a map like this:
Realize the requirement: The car is driving on the map
If we want to make a car run on a map, we first have to draw a line.
By the point of attachment
So once we have the map, if we want to draw on the map we’re going to use this MultiPolyline class, polylines. Broken lines are generally used in motion trajectory display, route planning display and other scenes.
This class is to layer the way of polyline single or batch drawing, and delete and other operations. You can create, modify and delete on the map.
Var path = [new TMap.LatLNG (39.98481500648338, 116.30571126937866), new TMap.LatLNG (39.982266575222155), LatLNG (39.982348784165886, 116.3111400604248), new TMap.LatLNG (39.978813710266024), 116.3111400604248), new TMap.LATLNG (39.978813710266024, 116.31699800491333)]; Var polyLayer = new TMap.MultiPolyline({map, // Draw to target map // Geometries: [{styleId: 'style_blue', Paths: path }], });Code renderings
To draw a line, you have to have dots, and the dots are represented by a latitude and longitude on the map, such as new TMap.LATLNG (39.98481500648338, 116.30571126937866). With a set of dots, we can connect the dots to form a broken line.
Of course, we can also modify the first, change the color of the line, width, width of the line, the color of the line, the way of the end of the line
Var polylineLayer = new TMap.MultiPolyline({map, // draw to target map) {'style_blue': New TMap. polylineStyle ({'color': '#3777FF', // line fill 'width': 3, // line width' borderWidth': 1, // line width' borderColor': '# FFF', / / edge color 'lineCap' : 'round' / / line end way})}, geometries' : [{styleId: 'style_blue' paths: path}],});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.
Relevant documentation for this class is explained
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: 'car-down', position: new TMap. 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)});Define Mark’s styles in the Styles section. There are three of them: when the vehicle starts, when the vehicle moves, and when the vehicle ends. Define the styles in Geometries to be used in that place.
After the above step, the vehicle is already at the starting point on the track, but it can’t walk on its own, as shown in the figure
In Tencent map, if you want to let a map go, you need to use the MoveAlong method of Multimarker, the specific usage
marker.moveAlong({
'car': {
path,
speed: 250
}
}, {
autoRotation: true
})Path is the path that marker walks, speed is the speed, and autoRotation means whether it will rotate automatically on the way
Final effect and source code
The full 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 playback - global mode </title> </head> <script 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%; } </div> <div type="text/javascript" var center = new TMap.latlng (39.984104, container) 116.307503); Var map = new TMap. map ("container", {zoom: 15, center: center}); Var path = [new TMap.LatLNG (39.98481500648338, 116.30571126937866), new TMap.LatLNG (39.982266575222155), LatLNG (39.982348784165886, 116.3111400604248), new TMap.LatLNG (39.978813710266024), 116.3111400604248), new TMap.LATLNG (39.978813710266024, 116.31699800491333)]; Var polylineLayer = new TMap.MultiPolyline({map, // draw to target map) {'style_blue': New TMap. polylineStyle ({'color': '#3777FF', // line fill 'width': 4, // line width' borderWidth': 2, // line 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: 'car-down', position: new TMap. 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>End result
Write in the last
Tencent location services provide a lot of examples, if do a demand without a clue, you can take a look at the Tencent map of the example center.
If you are a master, want to do more custom extension functions, you can directly view the API documents provided by Tencent, which contains all the class properties, methods.
Akiko: Bring me my plaid shirt
Link: https://fizzz.blog.csdn.net/a…
Source: CSDN
The copyright belongs to the author. For commercial reprint, please contact the author for authorization. For non-commercial reprint, please note the source.