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.