前言
最近公司有个地图功能开发，依据车辆的行驶的经纬度，来画出车辆的挪动轨迹，并模仿车辆在该线路的行驶过程。
效果图大抵是这样的。
繁难入门
首先进入腾讯位置服务页面而后进行注册账号，注册实现后须要申请AppKey，咱们将在本人的利用中配置这个Key来应用SDK中的服务。
webserveapi默认勾选就能够，在未上线之前，咱们能够先不填域名白名单。
只须要在html的页面里引入即可
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=你刚申请的key"></script>一个实现的例子
<!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,//设置地图旋转角度 pitch: 30, //设置俯仰角度（0~45） zoom: 12,//设置地图缩放级别 center: center//设置地图中心点坐标 }); } </script></body></html>把下面这段代码保留到html文件中，用浏览器关上，就能够看到一个地图,如下：
实现需求：汽车行驶在地图上
咱们要想让车在地图上跑起来，首先要画出一条线。
由点连线
有了地图之后，咱们要在地图上划线的话须要用到这个MultiPolyline这个类，折线。折线个别用于静止轨迹显示、路线布局显示 等场景中。
这个类是以图层的形式对折线进行单条或批量绘制，以及删改等操作。你能够在地图上创立，批改，删除。
var path = [ new TMap.LatLng(39.98481500648338, 116.30571126937866), new TMap.LatLng(39.982266575222155, 116.30596876144409), new TMap.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, // 绘制到指标地图 // 折线款式定义 geometries: [{ styleId: 'style_blue', paths: path }],});代码效果图
要画线，必须要先有点，而点在地图上体现为一个经纬度，即这样的new TMap.LatLng(39.98481500648338, 116.30571126937866),有了一组点之后咱们，就能对点进行连线，最初造成一个折线。
当然咱们也能够对先进行批改，扭转线的色彩，宽度，边线宽度， 边线色彩，线端头形式
var polylineLayer = new TMap.MultiPolyline({ map, // 绘制到指标地图 // 折线款式定义 styles: { 'style_blue': new TMap.PolylineStyle({ 'color': '#3777FF', //线填充色 'width': 3, //折线宽度 'borderWidth': 1, //边线宽度 'borderColor': '#FFF', //边线色彩 'lineCap': 'round' //线端头形式 }) }, geometries: [{ styleId: 'style_blue', paths: path }],});物沿线动
有了线之后，也就是行驶轨迹后，咱们须要在线的起始端增加一个汽车的标记，而后让这个汽车沿着线走起来，
在腾讯地图里要在地图上增加一个标注，须要应用MultiMarker类，这个类能够让你往地图上的多个标注点，可自定义标注的图标。
该类的相干文档解释
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) }]});在styles中定义mark的款式，一共有三种，车辆开始时，车辆前进时，车辆完结时。
在geometries中定义款式在那个中央应用。
做完下面一步，车辆曾经呈现在了轨迹上的终点，但还不会本人走，
如图
在腾讯地图中如果要让一个地图走，须要应用的
MultiMarker的moveAlong办法,具体用法
marker.moveAlong({ 'car': { path, speed: 250 }}, { autoRotation: true})path是marker行走的门路，speed是速度，autoRotation示意是否在前进途中主动将旋转
最终成果及源码
残缺的源码是这样的
<!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轨迹回放-全局模式</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%; }</style><body> <div id="container"></div> <script type="text/javascript"> var center = new TMap.LatLng(39.984104, 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, 116.30596876144409), new TMap.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, // 绘制到指标地图 // 折线款式定义 styles: { 'style_blue': new TMap.PolylineStyle({ 'color': '#3777FF', //线填充色 'width': 4, //折线宽度 'borderWidth': 2, //边线宽度 'borderColor': '#FFF', //边线色彩 'lineCap': 'round' //线端头形式 }) }, 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>最终的成果
写在最初
腾讯位置服务提供了很多示例，如果做个需要没有脉络的话，能够先看看腾讯地图的示例核心。
如果你是高手，想做更多自定义扩大的性能，能够间接查看腾讯提供的API文档，外面蕴含了所有类的属性，办法。
作者：拿我格子衫来
链接：https://fizzz.blog.csdn.net/a...
起源：CSDN
著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。