VUE之高德地图轨迹绘制与轨迹回放
步骤:安装依赖npm install vue-amap -Smain.js中注册import AMap from 'vue-amap'Vue.use(AMap)AMap.initAMapApiLoader({key: '你申请的key',plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView',
·
步骤:
安装依赖
npm install vue-amap -S
main.js中注册
import AMap from 'vue-amap'
Vue.use(AMap)
AMap.initAMapApiLoader({
key: '你申请的key',
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
// 默认高德 sdk 版本为 1.4.4
v: '1.4.4'
})
组件中使用
<template>
<div id="container" style="width:100vw;height:90vh" />
</template>
<script>
import car from '@/assets/images/logo.png' //引用标注图标
//绘制线路需要的坐标
var lineArr = [[116.478935, 39.997761], [116.478939, 39.997825], [116.478912, 39.998549], [116.478912, 39.998549], [116.478998, 39.998555], [116.478998, 39.998555], [116.479282, 39.99856], [116.479658, 39.998528], [116.480151, 39.998453], [116.480784, 39.998302], [116.480784, 39.998302], [116.481149, 39.998184], [116.481573, 39.997997], [116.481863, 39.997846], [116.482072, 39.997718], [116.482362, 39.997718], [116.483633, 39.998935], [116.48367, 39.998968], [108.983569, 34.285675], [106.205794, 38.458831], [111.761777, 40.875595], [103.85094, 35.987496]]
export default {
data() {
return {
firstArr: [116.478935, 39.997761] //中心点/初始坐标
}
},
created() {},
mounted() {
setTimeout(() => {
this.initMap() //异步加载(否则报错initMap is not defined)
// this.initroad()
}, 1000)
},
methods: {
// 初始化地图
initMap() {
var that = this
this.map = new AMap.Map('container', {
resizeEnable: true, // 窗口大小调整
center: this.firstArr, // 中心 firstArr: [116.478935, 39.997761],
zoom: 5
})
// 添加工具栏
this.map.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
// 工具条
const toolbar = new AMap.ToolBar()
// 比例尺
const scale = new AMap.Scale()
this.map.addControl(toolbar)
this.map.addControl(scale)
})
// 添加maker
this.marker = new AMap.Marker({
map: this.map,
position: this.firstArr,
icon: 'https://webapi.amap.com/images/car.png',
offset: new AMap.Pixel(-26, -13), // 调整图片偏移
autoRotation: true, // 自动旋转
angle: -90 // 图片旋转角度
})
// maker点击事件
this.marker.on('click', function(e) {
console.log(`我被点击啦---`, e)
that.initroad() //点击maker绘制轨迹
setTimeout(() => {
this.moveAlong(lineArr, 1000000) // 动态描点(需要二次动态绘制轨迹开启)
},500)
})
},
// 初始化轨迹
initroad() {
// 绘制还未经过的路线
this.polyline = new AMap.Polyline({
map: this.map,
path: lineArr,
showDir: true,
strokeColor: '#28F', // 线颜色--蓝色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, // 线宽
// strokeStyle: "solid" //线样式
lineJoin: 'round' // 折线拐点的绘制样式
})
// 绘制路过了的轨迹
var passedPolyline = new AMap.Polyline({
map: this.map,
strokeColor: '#AF5', // 线颜色-绿色
// path: lineArr.reverse(),
// strokeOpacity: 1, //线透明度
strokeWeight: 6 // 线宽
// strokeStyle: "solid" //线样式
})
this.marker.on('moving', e => {
passedPolyline.setPath(e.passedPath)
})
this.map.setFitView() // 合适的视口
}
}
}
</script>
<style lang="scss" scoped>
</style>
如图:点击maker先绘制轨迹,随后maker再次动态绘制轨迹
更多推荐
已为社区贡献32条内容
所有评论(0)