首页 > 其他分享 >VUE：引入腾讯地图并实现轨迹动画

VUE：引入腾讯地图并实现轨迹动画

时间：2023-04-11 11:13:39浏览次数：49  
标签：动画 TMap VUE map car LatLng 腾讯 marker new

VUE：引入腾讯地图并实现轨迹动画

Posted on 2022-09-22 15:07  书中枫叶  阅读(1421)  评论(4)  编辑  收藏  举报

腾讯位置服务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>
   

本文来自博客园，作者：书中枫叶，转载请注明原文链接：https://www.cnblogs.com/zy-mg/p/16719382.html

标签：动画,TMap,VUE,map,car,LatLng,腾讯,marker,new
From： https://www.cnblogs.com/sexintercourse/p/17305531.html

相关文章

  • vue中使用echarts的两种方法
    vue中使用echarts的两种方法Postedon 2021-08-1518:59  书中枫叶 阅读(33524) 评论(1)  编辑  收藏  举报在vue中使用echarts有两种方法一、第一种方法1、通过npm获取echartsnpminstallecharts--save2、在vue项目中引入echarts在 main.js 中添加下......
  • vue2 使用 swiper 轮播图效果
    vue2使用swiper轮播图效果Postedon 2021-04-0813:58  书中枫叶 阅读(1612) 评论(0)  编辑  收藏  举报上次更新:2022-03-0817:06第一步、先安装swiper插件[email protected]第二步、组件内引入swiper插件importSwi......
  • vue3 el-table-column 修改时间格式
    根据element文档说明，el-table中的el-table-column是可以使用formatter格式化时间的。  先添加绑定函数formatter <el-table-columnprop="createdTimeFormat":formatter="dateFormat"label="日期"width="170"></el-table-column> 新建格式......
  • vue 预览PDF、Docx、EXCEL文件
      <template><divclass="contentArea"><divclass="fileContainer"ref="fileDiv"v-if="$route.query.fileName.indexOf('docx')!==-1"></div><divclass="f......
  • vue生命周期（钩子函数）
    目录介绍介绍Vue实例有一个完整的生命周期，也就是从开始创建初女台化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程，我们称这是Vue的生命周期。生命周期：vue实例从创建到销毁的过程。生命周期钩子：就是生命周期事件的别名而已钩子函数描述创建期间的......
  • ZR.Admin小改和VUE3版本体验
    前言孔乙己显出极高兴的样子，将两个指头的长指甲敲着柜台，点头说：“对呀，对呀！......回字有四样写法，你知道么？”大家好，我是44岁的大龄程序员码农阿峰。阿峰从事编程二十年了，虽然没有成为架构师，却也用过很多种架构。几年前开始研究JAVA企业级快速开发框架若依，后来发现了它的.net版本......
  • 使用vue3创建后台管理项目
    最后案例：    一：创建一个Vue应用打开控制台：npminitvue@latest输入你需要创建的项目名称，一路回车   下载需要的包，如下："dependencies":{"@element-plus/icons-vue":"^2.1.0","axios":"^1.3.5","element-plus"......
  • 在vue中为vuecal组件中的一个按钮添加点击事件
    现在需要为一个按钮添加点击事件由于vuecal文档中没有该按钮的点击事件，所以考虑使用原生dom为其添加点击事件使用原生dom添加使用this.$nextTick+.onclickthis.$nextTick(()=>{ //获取对应的dom元素 varotest=document.getElementsByClassName("vuecal__arrowvueca......
  • vue2源码-二、对象响应式原理
    //循环对象进行一次劫持classObserver{constructor(value){this.walk()}walk(data){//重新定义属性Object.keys(data).forEach((key)=>defineReactive(data,key, data[key]))}}//属性劫持//对对象target，定义属性key，值为value//使用Object.definProperty重......
  • d3.js制作蜂巢图表带动画效果
     以上是效果图，本图表使用d3.jsv4制作。图表主要功能是在六边形格子中显示数据，点击底部图标可以切换指定格子高亮显示，图表可以随浏览器任意缩放。 1.图表的主体结构是由正六边形组成，使用d3生成六边形可以使用d3-hexbin.js，生成六边形比较方便，只要给定中心点坐标和半径即可生......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99