vue:引入腾讯地图并实现轨迹动画_书中枫叶-编程思维

腾讯位置服务JavaScript API

效果:

引入步骤:

  1. 在 html 中通过引入 script 标签加载API服务
  2. 在一个盒子元素 div 中预先准备地图容器,并在CSS样式中定义地图(容器)显示大小
  3. 创建并显示地图的代码
  4. 创建动画和标记
1. 在 html 中通过引入 script 标签加载API服务
  <script src="https://map.qq.com/api/gljs?v=1.exp&key=你申请的腾讯地图应用key"></script>
2. 在body中预先准备地图容器,并在CSS样式中定义地图(容器)显示大小
 <div id="container"></div>

  #container {
    width: 100%;
    height: calc(100vh - 280px);
    border-radius: 10px;
    overflow: hidden;
  }

3. 创建并显示地图的代码
   mounted() {
      this.initMap()
    },

   methods: {
      initMap() {
        //设置地图中心点
        let center = new TMap.LatLng(39.984104, 116.307503);
        // 初始化地图
        this.map = new TMap.Map('container', {
          zoom: 15,
          center: center,
          // baseMap: {  // 设置卫星地图
          //   type: 'satellite'
          // }
        });
        this.polylineLayer = new TMap.MultiPolyline({
          map:this.map, // 绘制到目标地图
          // 折线样式定义
          styles: {
            style_blue: new TMap.PolylineStyle({
              color: '#ff8d00', // 线填充色
              width: 4, // 折线宽度
              borderWidth: 2, // 边线宽度
              borderColor: '#FFF', // 边线颜色
              lineCap: 'round', // 线端头方式
              eraseColor: 'rgb(172,172,172)',//擦除路径的颜色
            }),
          },
          geometries: [
            {
              id: 'erasePath',
              styleId: 'style_blue',
              paths: this.path,
            },
          ],
        });
        this.marker = new TMap.MultiMarker({
          map:this.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),
            },
          ],
        });
      }
    }
4. 创建动画和标记
     // 暂停动画
     pauseMove() {
        this.marker.pauseMove()
      },
     // 停止动画
      resumeMove() {
        this.marker.resumeMove()
      },
     // 开始动画
      startCar() {
        // 使用marker 移动接口, https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocMarker
        //调用moveAlong动画 执行标记点动画开始
        this.marker.moveAlong(
          {
            car: {
              path: this.path,//移动路径的坐标串
              // duration:8000,//完成移动所需的时间,单位:毫秒
              speed: 250, //speed为指定速度,正整数,单位:千米/小时
            },
          },
          {
            autoRotation: true,//自动旋转
          }
        );
        //监听事件名
        this.marker.on('moving', (e) => {
          var passedLatLngs = e.car && e.car.passedLatLngs;
          if (passedLatLngs) {
            // 使用路线擦除接口 eraseTo, https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVector
            this.polylineLayer.eraseTo(
              'erasePath',
              passedLatLngs.length - 1,
              passedLatLngs[passedLatLngs.length - 1]
            );
          }
        });

      },

地图组件完整代码

<template>
  <section>
    <el-button style="margin: 15px" size="mini" type="danger" @click="startCar">开始</el-button>
    <el-button style="margin: 15px" size="mini" type="danger" @click="pauseMove">暂停</el-button>
    <el-button style="margin: 15px" size="mini" type="info" @click="resumeMove">继续</el-button>
    <div id="container"></div>
  </section>
</template>

<script>
  export default {
    name: "mk-map",
    data() {
      return {
        map: null,
        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),
          new TMap.LatLng(39.988813710266024, 116.31699800491333),
          new TMap.LatLng(39.989813710266024, 116.31699800491333),
          new TMap.LatLng(39.990813710266024, 116.31699800491333),
          new TMap.LatLng(39.98481500648338, 116.30571126937866),
        ],
        polylineLayer: null,
        marker: null
      }
    },
    mounted() {
      this.initMap()
    },
    methods: {
      pauseMove() {
        this.marker.pauseMove()
      },
      resumeMove() {
        this.marker.resumeMove()
      },
      startCar() {
        // 使用marker 移动接口, https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocMarker
        //调用moveAlong动画 执行标记点动画开始
        this.marker.moveAlong(
          {
            car: {
              path: this.path,//移动路径的坐标串
              // duration:8000,//完成移动所需的时间,单位:毫秒
              speed: 250, //speed为指定速度,正整数,单位:千米/小时
            },
          },
          {
            autoRotation: true,//自动旋转
          }
        );
        //监听事件名
        this.marker.on('moving', (e) => {
          var passedLatLngs = e.car && e.car.passedLatLngs;
          if (passedLatLngs) {
            // 使用路线擦除接口 eraseTo, https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVector
            this.polylineLayer.eraseTo(
              'erasePath',
              passedLatLngs.length - 1,
              passedLatLngs[passedLatLngs.length - 1]
            );
          }
        });

      },
      initMap() {
        //设置地图中心点
        let center = new TMap.LatLng(39.984104, 116.307503);
        // 初始化地图
        this.map = new TMap.Map('container', {
          zoom: 15,
          center: center,
          // baseMap: {  // 设置卫星地图
          //   type: 'satellite'
          // }
        });
        this.polylineLayer = new TMap.MultiPolyline({
          map:this.map, // 绘制到目标地图
          // 折线样式定义
          styles: {
            style_blue: new TMap.PolylineStyle({
              color: '#ff8d00', // 线填充色
              width: 4, // 折线宽度
              borderWidth: 2, // 边线宽度
              borderColor: '#FFF', // 边线颜色
              lineCap: 'round', // 线端头方式
              eraseColor: 'rgb(172,172,172)',//擦除路径的颜色
            }),
          },
          geometries: [
            {
              id: 'erasePath',
              styleId: 'style_blue',
              paths: this.path,
            },
          ],
        });
        this.marker = new TMap.MultiMarker({
          map:this.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),
            },
          ],
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  #container {
    width: 100%;
    height: calc(100vh - 280px);
    border-radius: 10px;
    overflow: hidden;
  }
</style>

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://www.cnblogs.com/zy-mg/p/16719382.html

移动端h5 input输入完成后页面底部留白问题 - 编程思维

说明 最近在用vue写几个H5页面在微信上展示,遇到一个在弹窗上input输入完成之后点击键盘的完成,页面底部留出一片空白的问题 出现原因分析 当键盘抬起时,window.scrollY会从0变到键盘的高度,所以解决办法就是当input失去焦点的时候,将window.scrollY重新设置为0 解决 给所有的inp

【上线】一个简单的前端上线流程 - 编程思维

1.生产构建 对生产环境的构建包括合并、抽取、压缩、调试方面。 合并:将style和javascript文件进行合并; 抽取:样式从javascript中抽取出来; 压缩:JS、CSS的压缩; 调试:开启sourceMap JS压缩: //安装 npm install -D uglifyjs-webpack-plu

vue 写作风格指南及规范 - 编程思维

对于vue的书写风格,vue官网上有一套完整的适合入门时所遵循的指南。在每个公司中,每个团队都有自己的风格,针对我们前端团队的风格,总结出了一套适用于我们公司的书写规范。其中大部分都是按照指南的规定来遵循的,如果不想一个一个看指南中的规则,可以遵循本文总结的规则,也能写出符合规范的vue组件。 1.对于单文件组件,每个

使用ueditor富文本编辑器导出文本内容时,自定义各个标签的属性,以img标签添加最大宽度为例(vue框架). - 编程思维

现在在做的项目是一个对功能要求比较高的项目,同时也有SDK端的开发.项目中有一个场景就是在pc端通过富文本编辑的内容要在SDK端显示,测试的时候发现有一些图片超出了手机的最大宽度,会出现一个横向的滚动条,这样很影响体验.做显示这块的是公司做android和ios的同事,他们拿到的值富文本直接导出的json格式的html

html5制作在线地图 - 编程思维

地图是一种普遍应用,按准确度分精确地图(GIS)和示意地图(MapChart),前者支持各种地图投影与坐标系,譬如ArcGIS,后者使用相对坐标系,或者支持简单的WGS84经纬网坐标系,比如ILOG Elixir地图组件,示意地图再按图片类型分,可分为:栅格地图与矢量地图,Qunee组件适合制作矢量示意地图。 中

【高德地图api】从零开始学高德js api(一)地图展现 - 编程思维

摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧。在过去,marker大于500之后,浏览器开始逐渐卡死,大家都开始寻找解决方案,比如聚合marker啊,比如麻点图啊。聚合marker里面还有一些复杂的算法,而麻点图,最让大家头疼的,就是如何生成麻点图,如何切图,如何把图片贴到地图上,还有如何

哈啰技术-编程思维

背景逆地理编码(将经纬度转换为详细结构化的地址)调用目前是整个地图服务调用量最大的接口,业务主流程多个节点依赖逆地理服务,接口不可用会直接阻塞订单。目前高峰期高德逆地理接口的QPS(Queries Per Second 每秒查询率)经常会几倍的超掉,超限报错的请求会通过哈啰地图平台的LBS(Location Based

腾讯位置服务-编程思维

前言 :伴随着地理信息产业的不断演进,以及LBS、大数据、5G、云、AI等新技术的持续应用,数实融合发展呈现出加速态势,数字地图也从移动互联网时代向产业互联网时代进化。12月1日,2022腾讯全球数字生态大会举办WeMap腾讯地图产业版专场举行, “两周岁”的WeMap迎来重磅升级。升级后的WeMap,不仅能提供一个数

arcgis插件-太乐地图-编程思维

在很多行业,打败你的往往不是竞争对手,而是你意想不到的其他因素。回想十年前,如果能预料到现在的处境,也许当时的心态和做法会有所不同。在多年前,市场上出现包括水经注、太乐、BigeMap、91卫图等多种地图获取工具,由于政策原因,基本都没落了,这里介绍一下太乐地图插件。 简介 太乐地图ArcGIS插件 是一款可以浏览众