专栏首页腾讯位置服务使用腾讯位置服务实现类滴滴汽车沿轨迹行驶功能

使用腾讯位置服务实现类滴滴汽车沿轨迹行驶功能

前言

最近公司有个地图功能开发,根据车辆的行驶的经纬度,来画出车辆的移动轨迹,并模拟车辆在该线路的行驶过程。

效果图大致是这样的。

image.png

简易入门

首先进入腾讯位置服务页面然后进行注册账号,注册完成后需要申请AppKey,我们将在自己的应用中配置这个Key来使用SDK中的服务。

企业微信20210521-111830@2x.png

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文件中,用浏览器打开,就可以看到一个地图,如下:

image.png

实现需求:汽车行驶在地图上

我们要想让车在地图上跑起来,首先要画出一条线。

由点连线

有了地图之后,我们要在地图上划线的话需要用到这个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
  }],
});

代码效果图

image.png

要画线,必须要先有点,而点在地图上表现为一个经纬度,即这样的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中定义样式在那个地方使用。

做完上面一步,车辆已经出现在了轨迹上的起点,但还不会自己走,

如图

image.png

在腾讯地图中如果要让一个地图走,需要使用的

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>

最终的效果

20201226175852284.gif

写在最后

腾讯位置服务提供了很多示例,如果做个需求没有头绪的话,可以先看看腾讯地图的示例中心

如果你是高手,想做更多自定义扩展的功能,可以直接查看腾讯提供的API文档,里面包含了所有类的属性,方法。

作者:拿我格子衫来

链接:https://fizzz.blog.csdn.net/article/details/111764120

来源:CSDN

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

原文链接:https://fizzz.blog.csdn.net/article/details/111764120

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 响铃:云服务纷纷盯上智慧出行,新战场来了?

    共享经济在出行领域的两个代表性产品滴滴打车与摩拜单车的运营数据还在持续翻滚。据滴滴官方发布,目前平台每天订单超2000万,处理数据超过4500TB,而摩拜早在六...

    曾响铃
  • AI一分钟 | 特朗普称将恢复中兴业务;波士顿机器狗明年上市;特斯拉Model 3下周开始预订

    北京时间 13 日晚 23 点左右(美国当地时间 13 日上午 11 点左右),特朗普发布推文:“我和习主席正携手合作,为中国的通信巨头中兴通讯提供一条快速重返...

    AI科技大本营
  • AI一分钟 | 小米智能音箱mini版曝光,或售199元;特朗普被指利用AI竞选成功

    整理 | 阿司匹林 一分钟AI 3月19日,小米社区有网友曝光了小爱同学mini版,它可能是3月27日小米MIX 2S发布会的“小惊喜”,售价可能为199元。...

    AI科技大本营
  • 美团确定进军自动驾驶,滴滴如何应对?

    作者 | 费棋 出品 | AI科技大本营(公众号ID:rgznai100) 程维问:“美团为什么要做打车?” “就试试。”王兴答。 2017 年年初,美团在南...

    AI科技大本营
  • 腾讯安全和滴滴安全联合共建“互联网安全联合实验室”

    7月30日,在第五届全球互联网安全领袖峰会(CSS 2019)上,腾讯安全和滴滴安全正式宣布将共建“互联网安全联合实验室”。基于腾讯安全大数据和AI能力,双方...

    腾讯云安全
  • 滴滴正式分拆无人车业务,复刻Uber上市路径,传孙正义再加持

    今天(8月5日)滴滴出行宣布旗下自动驾驶部门,升级为独立公司,专注于自动驾驶研发、产品应用及相关业务拓展。

    量子位
  • Uber将优步交给滴滴,押注无人车追赶谷歌、百度?

    滴滴与中国优步合并终于尘埃落定,这一超级资本事件已成功抢到各种头条,相关解读连篇累牍。正如我昨日文章所言,Uber此举的核心目的是“舍车保帅”,将中国市场交给新...

    罗超频道
  • 在东莞上线共享单车服务,滴滴迈出智能出行一小步

    1月31日,继成都之后,滴滴单车在东莞、佛山上线,用户可在其App上扫码解锁ofo或者自有共享单车青桔。在App上滴滴并没有区分不同单车品牌,体现出一视同仁。值...

    罗超频道
  • 滴滴叶杰平:年运送乘客百亿次,AI如何“服务”出行领域?| BDTC 2019

    “如果把北京一天滴滴的轨迹数据放在一起,要覆盖北京所有道路差不多四百次,数据非常大、非常完整。”

    AI科技大本营

扫码关注云+社区

领取腾讯云代金券