百度地图轨迹定位原来这样实现

因为昨天看到一个需求是需要实现轨迹路线,所以我今天呢,就写一下百度地图的轨迹实现。听到该需求的时候,不免愣了一下,我丢这个没做过,但是我们用地图都会看到这种轨迹路线,比如我们到一个地方,那条路线最优,或者我们使用地图去某个地方,都会遇到这种轨迹。
先看看实现效果

话不多说,我们现在百度地图控制台申请一个AK

申请完成之后,我们就可以拿到这个百度地图访问应用AK了

接下来我们,我们打开vscode,在public的index.html中使用script标签引入我们的百度地图

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=您的AK"></script>

现在我们去准备一下dom结构

这里用到了一个flag写了一个三目,用于定位和轨迹按钮的切换

我们先来写一个定位标记吧,这个比较简单

我这里就把经纬度写死了,如果有链接,会返回经纬度信息,我们可以用字符串截取进行获取

我这里暂时就写死了

this.flag = !this.flaglet map = new BMapGL.Map("container");          // 创建地图实例 let point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 map.centerAndZoom(point, 15);map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放let marker1 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915));map.addOverlay(marker1);

这样我们的标记点就出来了

随后我们写一下轨迹的代码

this.flag=!this.flag;let bmap = new BMapGL.Map("container");                          // 创建Map实例bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17); // 初始化地图，设置中心点坐标和地图级别bmap.enableScrollWheelZoom(true);let path = [{   'lng': 116.297611,   'lat': 40.047363 }, {   'lng': 116.302839,   'lat': 40.048219 }, {   'lng': 116.308301,   'lat': 40.050566 }, {   'lng': 116.305732,   'lat': 40.054957 }, {   'lng': 116.304754,   'lat': 40.057953 }, {   'lng': 116.306487,   'lat': 40.058312 }, {   'lng': 116.307223,   'lat': 40.056379}];let point = [];for (let i = 0; i < path.length; i++) {   point.push(new BMapGL.Point(path[i].lng, path[i].lat));}let pl = new BMapGL.Polyline(point);let trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {   overallView: true, // 动画完成后自动调整视野到总览   tilt: 55,          // 轨迹播放的角度，默认为55   duration: 3000,   // 动画持续时长，默认为10000，单位ms   delay: 1000       // 动画开始的延迟，默认0，单位ms});trackAni.start();

这样我们的百度地图的轨迹也就实现啦

前两天一个粉丝问3D地图加飞线图如何实现,后面我们就写一篇这样的文章,希望可以帮助更多的人