preface

In the use of map access, many developers have asked us whether Tencent Location service supports the track playback function, so today we specially include the track playback & car movement example of our JavaScript API GL in this article to share.

Track playback & Dolly moving

In JavaScript API GL, track playback is easily implemented using the moveAlong() method in MultiMarker, and you can make any changes to the style you want, such as changing the car image, not showing the route, or changing the color you want.

code

Var map = new map. map ("container", {zoom: 15, center: new map.latLNG (39.984104, 116.307503)}); 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 marker = new tmap. MultiMarker({map, styles: {// Style 'car-down': new tmap. MarkerStyle({'width': 40, // Car image width (pixels) 'height': 40, // height' Anchor ': {// Pixel position in the center of the image (car will keep nose forward, will turn in the center) x: 20,y: 20,}, 'faceTo': Rotate 'rotate': 180; rotate' rotate': 180; rotate' rotate': 180; './img/car.png', // car image (car front up, 0 degrees due north)})}, geometries: [{// car marker position information ID: 'car', // Since MultiMarker supports multiple point markers, give the car an ID styleId: 'car-down', // bind style position: New MAP.latLNG (39.98481500648338, 116.30571126937866),// Initial coordinates}]}); MoveAlong ({"car": {// set "car" to moveAlong "path" at 70 km/h path, speed: 70}}, {autoRotation:true}Copy the code

Online example: lbs.qq.com/webDemoCent…

FaceTo notes on MultiMarker:

JavascriptAPI GL is a 3D map that can be tilted and rotated, which brings up the issue of whether the image should be placed on the ground or on the screen:

FaceTo: the “map” is attached to the ground, the track plays back the scene, the car is to be attached to the ground (left)

FaceTo: When the “screen” is stuck to the screen, the car scene is not suitable, it will always “stand up” (middle photo), and the “sreen” is suitable for marking position (right photo).

The Angle of view moves with the car (coming soon, please look forward to it)

When the car moves along the route, the control perspective follows the car’s movement, which can achieve a feeling similar to simulated navigation and third-person game perspective, which is very cool.