VUE：引入腾讯地图并实现轨迹动画
效果：
引入步骤：
- 在 html 中通过引入 script 标签加载API服务
- 在一个盒子元素 div 中预先准备地图容器，并在CSS样式中定义地图(容器)显示大小
- 创建并显示地图的代码
- 创建动画和标记
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>
VUE：引入腾讯地图并实现轨迹动画的更多相关文章
- Vue集成腾讯地图和几何库
关于Vue中如何引入腾讯地图,百度搜索中的结果已经非常明确: /** * 腾讯地图. * @param key * @returns {Promise<any>} * @construct ...
- uniapp H5引入腾讯地图
在网上搜索了许多关于uniapp引入腾讯地图的方法都以失败告终,我开发的应用主要使用于H5,小程序与H5是不同的sdk,就不在这说了,况且小程序有手把手教学,可参考腾讯地图官网https://lbs. ...
- vue2.0引入腾讯地图
百度很多东西,然后我没找到腾讯地图在VUE2.0里面的引用.于是根据找的其他地图引用资料进行尝试.步骤如下. 首先在src里面建立了TMap.js的文件,内容如下: export function T ...
- 微信小程序引入腾讯地图API方法
微信小程序大热,在小程序过程中,我们很多时候都会用到地图.不管是企业的地址,还是商家的配送都会用到地图: 我在刚写地图这一块时,在网上也参考了很多网友的方法,始终有Bug(类似于地图拖拽是画面抖动,无 ...
- vue项目中使用腾讯地图
最近在使用腾讯地图api(以下以位置数据可视化API为例),在初建项目之后,按照官网的说法,直接引入 再将官网的初始化例子放一个方法 在mounted中调用即可看到腾讯地图,但是我引入之后,一直报TM ...
- 解决Vue引入百度地图JSSDK：BMap is undefined 问题
百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 解决跨域问题,实例调用百度地图 但vue项目中仅某一两个页面需要用到百度地图,所以不想在 index.html ...
- 16、vue引入echarts，划中国地图
vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echar ...
- 地图API使用文档-以腾讯地图为例
目录 腾讯地图API 2 1.API概览... 2 1.1 WebService API(官网注明是beta版本,可能不稳定,慎用):... 2 1.2 URL API:... 2 1.3 静态图AP ...
- Vue 实现一个中国地图
参考:https://www.cnblogs.com/mazey/p/7965698.html 重点:如何引入中国地图js文件,china.js require('echarts/map/js/chi ...
随机推荐
- Linux 批量杀死进程(详细版本)
使用场景 当程序中有使用到多进程且进程数较多的情况,如下图,且需要通过控制台杀死所有的 GSM_run.py 的进程时,利用 kill 命令一个一个的去结束进程是及其耗时且繁琐的,这时就需要我们的ki ...
- 【C++】学生管理系统
[C++]学生管理系统 一道非常经典的C语言题目,用C++实现 题目如下: 输入功能:由键盘输入10个学生的学号.姓名.三科成绩,并计算出平均成绩和总成绩,然后将它存入文件stud.dat. 插入 ...
- linux 运行.sh出现 Permission denied
执行.sh脚本时提示如下错误: [root@Dolen2021 redis]# ./startRedis.sh -bash: ./startRedis.sh: Permission denied [r ...
- cenos 7 zookeeper Error contacting service. It is probably not running
zkServer.sh status 命令查看zookeeper集群的状态,发现异常 Error contacting service. It is probably not running 最开始以 ...
- STM32与物联网02-网络数据收发
在上一节中,介绍了 ESP8266 的使用方法.不过上一节中都是通过串口调试工具手动发送信息的方式来操作 ESP8266 ,这肯定不能用于实际开发.因此,本节介绍如何编写合适的程序来和 ESP8266 ...
- DHCP原理及配置
DHCP工作原理 集中的管理.分配IP地址,使client动态的获得IP地址.Gateway地址.DNS服务器地址等信息,并能够提升地址的使用率. 简单来说,DHCP就是一个不需要账号密码登录的.自动 ...
- 86开关、家电、台扇等6键6路6感应通道高抗干扰触摸IC-VK3606D，稳定性好，抗干扰能力强
概述: VK3606D SOP16具有6个触摸按键,可用来检测外部触摸按键上人手的触摸动作.该芯片具有较高的集成度,仅需极少的外部组件便可实现触摸按键的检测.提供了6路1对1直接输出低电平有效.最长输 ...
- 【AcWing】周赛
A.糖果 题目链接 链接 题目描述 给定三个正整数 a,b,c. 请计算 ⌊a+b+c2⌋,即 a,b,c 相加的和除以 2 再下取整的结果. 输入格式 第一行包含整数 T,表示共有 T 组测试数据. ...
- 一般处理程序ashx接入微信服务器配置
首先在威信后台填写服务器相关配置,这里按照说明直接填写就好了.配置提交前在需要在我们服务端先准备号接受微信请求的url,对请求内容做验证. 1.准备接口配置信息 A.服务器URL 该URL用于开发者接 ...
- Luogu2375 [NOI2014]动物园 （KMP）
写炸,上网,不同KMP形态. 无力,照该,一换写法就过. 横批:我是垃圾 求\(next\)时\(DP\)出\(num\),路径压缩防卡\(n^2\) AC #include <iostream ...