VUE引入騰訊地圖并實(shí)現(xiàn)軌跡動(dòng)畫(huà)的詳細(xì)步驟
更新時(shí)間：2022年09月22日 15:25:31 作者：書(shū)中楓葉
這篇文章主要介紹了VUE引入騰訊地圖并實(shí)現(xiàn)軌跡動(dòng)畫(huà),引入步驟大概是在 html 中通過(guò)引入 script 標(biāo)簽加載API服務(wù)，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
效果：
引入步驟：
- 在 html 中通過(guò)引入 script 標(biāo)簽加載API服務(wù)
- 在一個(gè)盒子元素 div 中預(yù)先準(zhǔn)備地圖容器，并在CSS樣式中定義地圖(容器)顯示大小
- 創(chuàng)建并顯示地圖的代碼
- 創(chuàng)建動(dòng)畫(huà)和標(biāo)記
1. 在 html 中通過(guò)引入 script 標(biāo)簽加載API服務(wù)
<script src="https://map.qq.com/api/gljs?v=1.exp&key=你申請(qǐng)的騰訊地圖應(yīng)用key"></script>
2. 在body中預(yù)先準(zhǔn)備地圖容器，并在CSS樣式中定義地圖(容器)顯示大小
<div id="container"></div>
#container {
width: 100%;
height: calc(100vh - 280px);
border-radius: 10px;
overflow: hidden;
}3. 創(chuàng)建并顯示地圖的代碼
mounted() {
this.initMap()
},
methods: {
initMap() {
//設(shè)置地圖中心點(diǎn)
let center = new TMap.LatLng(39.984104, 116.307503);
// 初始化地圖
this.map = new TMap.Map('container', {
zoom: 15,
center: center,
// baseMap: { // 設(shè)置衛(wèi)星地圖
// type: 'satellite'
// }
});
this.polylineLayer = new TMap.MultiPolyline({
map:this.map, // 繪制到目標(biāo)地圖
// 折線樣式定義
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, // 繪制到目標(biāo)地圖
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. 創(chuàng)建動(dòng)畫(huà)和標(biāo)記
?// 暫停動(dòng)畫(huà)
? ? ?pauseMove() {
? ? ? ? this.marker.pauseMove()
? ? ? },
? ? ?// 停止動(dòng)畫(huà)
? ? ? resumeMove() {
? ? ? ? this.marker.resumeMove()
? ? ? },
? ? ?// 開(kāi)始動(dòng)畫(huà)
? ? ? startCar() {
? ? ? ? // 使用marker 移動(dòng)接口， https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocMarker
? ? ? ? //調(diào)用moveAlong動(dòng)畫(huà) 執(zhí)行標(biāo)記點(diǎn)動(dòng)畫(huà)開(kāi)始
? ? ? ? this.marker.moveAlong(
? ? ? ? ? {
? ? ? ? ? ? car: {
? ? ? ? ? ? ? path: this.path,//移動(dòng)路徑的坐標(biāo)串
? ? ? ? ? ? ? // duration:8000,//完成移動(dòng)所需的時(shí)間，單位：毫秒
? ? ? ? ? ? ? speed: 250, //speed為指定速度，正整數(shù)，單位：千米/小時(shí)
? ? ? ? ? ? },
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? autoRotation: true,//自動(dòng)旋轉(zhuǎn)
? ? ? ? ? }
? ? ? ? );
? ? ? ? //監(jiān)聽(tīng)事件名
? ? ? ? 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">開(kāi)始</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">繼續(xù)</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 移動(dòng)接口， https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocMarker
? ? ? ? //調(diào)用moveAlong動(dòng)畫(huà) 執(zhí)行標(biāo)記點(diǎn)動(dòng)畫(huà)開(kāi)始
? ? ? ? this.marker.moveAlong(
? ? ? ? ? {
? ? ? ? ? ? car: {
? ? ? ? ? ? ? path: this.path,//移動(dòng)路徑的坐標(biāo)串
? ? ? ? ? ? ? // duration:8000,//完成移動(dòng)所需的時(shí)間，單位：毫秒
? ? ? ? ? ? ? speed: 250, //speed為指定速度，正整數(shù)，單位：千米/小時(shí)
? ? ? ? ? ? },
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? autoRotation: true,//自動(dòng)旋轉(zhuǎn)
? ? ? ? ? }
? ? ? ? );
? ? ? ? //監(jiān)聽(tīng)事件名
? ? ? ? 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() {
? ? ? ? //設(shè)置地圖中心點(diǎn)
? ? ? ? let center = new TMap.LatLng(39.984104, 116.307503);
? ? ? ? // 初始化地圖
? ? ? ? this.map = new TMap.Map('container', {
? ? ? ? ? zoom: 15,
? ? ? ? ? center: center,
? ? ? ? ? // baseMap: { ?// 設(shè)置衛(wèi)星地圖
? ? ? ? ? // ? type: 'satellite'
? ? ? ? ? // }
? ? ? ? });
? ? ? ? this.polylineLayer = new TMap.MultiPolyline({
? ? ? ? ? map:this.map, // 繪制到目標(biāo)地圖
? ? ? ? ? // 折線樣式定義
? ? ? ? ? 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, // 繪制到目標(biāo)地圖
? ? ? ? ? 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>到此這篇關(guān)于VUE引入騰訊地圖并實(shí)現(xiàn)軌跡動(dòng)畫(huà)的文章就介紹到這了,更多相關(guān)vue引入騰訊地圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue CLI3移動(dòng)端適配(px2rem或postcss-plugin-px2rem)
這篇文章主要介紹了Vue CLI3移動(dòng)端適配(px2rem或postcss-plugin-px2rem),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue pages 多入口項(xiàng)目 + chainWebpack 全局引用縮寫(xiě)說(shuō)明
這篇文章主要介紹了vue pages 多入口項(xiàng)目 + chainWebpack 全局引用縮寫(xiě)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
這篇文章主要為大家介紹了vue之?dāng)?shù)據(jù)代理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
利用v-viewer圖片預(yù)覽插件放大需要預(yù)覽的圖片
本文介紹了v-viewer插件的安裝和使用步驟,包括npm安裝、在main.js文件中全局引入,以及常用的三種使用方式,文章提供了簡(jiǎn)單的布局頁(yè)面效果,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10
vue如何從后臺(tái)獲取數(shù)據(jù)生成動(dòng)態(tài)菜單列表
這篇文章主要介紹了vue如何從后臺(tái)獲取數(shù)據(jù)生成動(dòng)態(tài)菜單列表，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了淺談Vue.js 組件中的v-on綁定自定義事件理解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
這篇文章主要介紹了vue?elementUI?處理文件批量上傳方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3導(dǎo)入excel并解析excel數(shù)據(jù)渲染到表格中(純前端實(shí)現(xiàn))
在Vue中實(shí)現(xiàn)導(dǎo)出Excel有多種方式,可以通過(guò)前端實(shí)現(xiàn),也可以通過(guò)前后端配合實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue3導(dǎo)入excel并解析excel數(shù)據(jù)渲染到表格中的相關(guān)資料,文中介紹的方法是純前端實(shí)現(xiàn),需要的朋友可以參考下2024-04-04
本文主要介紹了vue封裝jquery修改自身及兄弟元素的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
父子組件之間的通信就是props down,events up,父組件通過(guò)屬性props向下傳遞數(shù)據(jù)給子組件,子組件通過(guò)事件events 給父組件發(fā)送消息,這篇文章主要給大家介紹了關(guān)于vue中組件的props屬性的相關(guān)資料,需要的朋友可以參考下2021-11-11