• 自动秒收录
  • 软件:1973
  • 资讯:57938|
  • 收录网站:279743|

IT精英团

VUE:引入腾讯地图 实现赛道动画

VUE:引入腾讯地图 实现赛道动画

浏览次数:
评论次数:
编辑: 乐咏
信息来源: ITPUB
更新日期: 2022-09-23 01:43:07
摘要

效果:引入步骤:在html中通过引入script标签加载API服务在一个盒子元素div中预先准备地图容器,并在CSS样式中定义地图(容器)显示大小创建并显示地图的代码创建动画和标记1.在

  • 正文开始
  • 相关阅读
  • 推荐作品

效果:

00-1010在html中,通过引入脚本标签加载API服务,在box元素div中预先准备好地图容器,用CSS样式定义地图(容器)的显示大小。创建和显示地图的代码创建动画和标记

引入步骤:

脚本src=' 3359map.qq.com/api/gljs? V=1 . expkey=key '/script
1. 在 html 中通过引入 script 标签加载API服务
div/div # container { width : 100%;height : calc(100 VH-280 px);border-radius : 10px;飞越:隐藏;}
2. 在body中预先准备地图容器,并在CSS样式中定义地图(容器)显示大小
mounted(){ this . init map()},方法: { init map(){//设置地图的中心点let center=new tmap . lat LNG(39.984104,116.307503);//初始化地图this.map=newtmap.map('容器',{Zoom : 15,Center 3360 Center,//base map 3360 {//设置卫星地图///type: '卫星'//} });this . polyline layer=new tmap . multi polyline({ 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 size="mini" type="danger" @click="startCar">开始</el-button>
<el-button size="mini" type="danger" @click="pauseMove">暂停</el-button>
<el-button size="mini" type="info" @click="resumeMove">继续</el-button>
<div></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>
生活的一切不如意,都会随时间消失殆尽,扬起微笑,握紧拳头为自己加油!!
标签:地图 动画 折线
如何在分布式系统中实现对关键资源的互斥访问?
« 上一篇 2022-09-23
  • 如何在分布式系统中实现对关键资源的互斥访问?
    0阅读 0条评论 个赞
    网络时代,购物、社交等之前只能在线下进行的活动,如今都可以在网络上完成。为了促进消费,电商网、网络店铺经常推出商品限定数量内的“秒杀”,“抢购”活动,类似的临界资源访问还有我们生活中常见的微信多人抢红……
  • Java SE 19的新特性
    0阅读 0条评论 个赞
    源码#源仓库:Github:java_new_features镜像仓库:GitCode:java_new_featuresHashMap新的构造方法#JavaSE19,构造哈希表的时候,由于有扩……
  • JAVA中容器设计的进化史:从白盒到黑盒 再到作为设计模式之一的迭代器
    0阅读 0条评论 个赞
    大家好,又见面了。在我们的项目编码中,不可避免的会用到一些容器类,我们可以直接使用List、Map、Set、Array等类型。当然,为了体现业务层面的含义,我们也会根据实际需要自行封装一些专门的Bea……
  • 利用卡夫卡的赋值模式实现超大群(10万)的消息推送
    0阅读 0条评论 个赞
    引言IM即时通信场景下,最重要的一个能力就是推送:在线的直接通过长连接网关服务转发,离线的通过APNS或者极光等系统进行推送。本文主要是针对在线用户推送场景来进行总结和探讨:如何利用Kafka的Ass……
  • MySQL DDL执行模式-在线DDL简介
    0阅读 0条评论 个赞
    MySQLDDL执行方式-OnlineDDL介绍1引言大家好,今天与大家一起分享一下mysqlDDL执行方式。一般来说MySQL分为DDL(定义)和DML(操作)。DDL:DataDefi……
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
  • 数据库发展史1-传统数据库
    0阅读 0条评论 个赞
    1946年,美国宾夕法尼亚大学诞生了人类第一台电子计算机--ENIAC(ElectronicNumericalIntegratorAndComputer,即电子数字积分计算机),这个占地170……
  • Byzer使用SQL完成端到端的机器学习过程
    0阅读 0条评论 个赞
    直播简介内容简介:这次分享,我们将以Kaggle上的出租车行车时间预测问题为例,示范如何使用两个开源项目Byzer和OpenMLDB联合来打造一个完整的机器学习应用,涵盖湖仓数据加载,可视化,特……
  • Sql Server系列:分区表操作
    0阅读 0条评论 个赞
    1.分区表简介分区表在逻辑上是一个表,而物理上是多个表。从用户角度来看,分区表和普通表是一样的。使用分区表的主要目的是为改善大型表以及具有多个访问模式的表的可伸缩性和可管理性。分区表是把数据……
  • ASP.NET核心6框架揭示示例演示[34]:缓存整个响应内容
    0阅读 0条评论 个赞
    我们利用ASP.NET开发的大部分API都是为了对外提供资源,对于不易变化的资源内容,针对某个维度对其实施缓存可以很好地提供应用的性能。《内存缓存与分布式缓存的使用》介绍的两种缓存框架(本地内存缓存和……
  • 基于位置变化的市县弹出引导切换
    31阅读 0条评论 个赞
    目录1.背景2.模型方案产出3.总结01背景58App业务中有城市和县域两个首页,两者中间有一个过渡选择页,用户通过点击该页面下的条目内容可以切换到对应条目的首页;比如:点击“北京”会跳转到北京(市)……
  • 利用卡夫卡的赋值模式实现超大群(10万)的消息推送
    0阅读 0条评论 个赞
    引言IM即时通信场景下,最重要的一个能力就是推送:在线的直接通过长连接网关服务转发,离线的通过APNS或者极光等系统进行推送。本文主要是针对在线用户推送场景来进行总结和探讨:如何利用Kafka的Ass……
  • 人人都能读懂的源代码——那些关于DOM的常见钩子包(二)
    0阅读 0条评论 个赞
    本文是深入浅出ahooks源码系列文章的第十五篇,该系列已整理成文档-地址。觉得还不错,给个star支持一下哈,Thanks。本篇接着针对关于DOM的各个Hook封装进行解读。useFul……
  • 让自己更有价值的5种能力
    0阅读 0条评论 个赞
    如何让自己更值钱?回答这个问题,需要用到黄金圈理论。什么是黄金圈理论?黄金圈理论,是国际知名营销专家、作家SimonSinek在2011年提出的,这是一种由内向外的思维模式。黄金圈理论提倡由Why、……
  • 浅谈SQL Server中统计对查询的影响
    4阅读 0条评论 个赞
    简介SQLServer查询分析器是基于开销的。通常来讲,查询分析器会根据谓词来确定该如何选择高效的查询路线,比如该选择哪个索引。而每次查询分析器寻找路径时,并不会每一次都去统计索引中包含的行数,值……
  • RDD星火基金简介(01)
    0阅读 0条评论 个赞
    1,基本概念RDD(ResilientDistributedDataset):弹性分布式数据集它是Spark中最基本的数据抽象,是编写Spark程序的基础。简单的来讲,一个Spark程序可以概括……
  • 基于 网络6的轻量级Webapi框架紧固点
    0阅读 0条评论 个赞
    大家好,我是等天黑。FastEndpoints是一个基于.NET6开发的开源webapi框架,它可以很好地替代.NETMinimalAPIs和MVC,专门为开发效率而生,带来了全……
  • [设计模式] Java设计模式-工厂模式
    9阅读 0条评论 个赞
    目录【设计模式】Java设计模式-工厂模式简介1、普通工厂(SimpleFactory)模式①、定义类②、定义简单的工厂类③、实例2、抽象工厂(AbstractFactory)模式①、定义类②、……
  • 转:Java老了 科特林会取而代之吗?
    0阅读 0条评论 个赞
    .css-1yuhvjn{margin-top:16px;}.css-3jt6os.FileLinkCard{-webkit-align-items:center;-webkit-box-align……
  • NET 6 EFCore WebApi使用JMeter进行吞吐量测试
    0阅读 0条评论 个赞
    开发环境VS2022.NET6测试环境测试工具接口压力测试工具:JMeter数据库MySQL5.7数据库和WebApi服务在同一台服务器上,JMeter在本人笔记本上。测试设置200个线程并发,每……
  • 新一代网络请求库:python-httpx库
    0阅读 0条评论 个赞
    目录httpx库一、概述1、简介2、命令行模式3、快速开始3.1get请求3.2post请求3.2.1表单3.2.2文件3.2.3JSON3.2.4二进制3.3响应处理3.4流……
  • 教大家如何处理Spring Boot易流中的用户和群体!
    1阅读 0条评论 个赞
    1.准备工作2.用户操作2.1添加用户2.2修改用户2.3删除用户2.4查询用户3.组操作3.1添加组3.2修改组3.3删除组3.4查询组4.查看表详情虽然说我们在实际开发中,……
  • 从PG15开始WAL压缩优化
    0阅读 0条评论 个赞
    PG15传闻中的超级令人激动的功能大多数跳票了,年初我也写过一个关于PG15新功能跳票的文章。PG15BETA已经发出几个月了,似乎PG15里令人激动人心的功能不多,不过从长长的新功能列表里,……
  • spring MVC(II)——请求处理参数和响应数据处理
    0阅读 0条评论 个赞
    1、请求处理参数1.1请求参数@RequestParam1.1.1不使用@RequestParam注解请求参数处理,不使用参数注解:1.如果请求参数名和请求处理的形参名一致,springMv……
  • SQL Server索引的功能
    0阅读 0条评论 个赞
    一、深入浅出理解索引结构实际上,您可以把索引理解为一种特殊的目录。微软的SQLSERVER提供了两种索引:聚集索引(clusteredindex,也称聚类索引、簇集索引)和非聚集索引(nonclu……
  • python的环境,你再也不用愁康达
    1阅读 0条评论 个赞
    CondaGuideConda简介conda是一个包,依赖和环境管理工具,适用于多种语言,如:Python,R,Scala,Java,Javascript,C/C++,FORTRAN……
最近发布资讯
更多