<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() { this.marker.moveAlong( { car: { path: this.path, speed: 250, }, }, { autoRotation: true, } ); this.marker.on('moving', (e) => { var passedLatLngs = e.car && e.car.passedLatLngs; if (passedLatLngs) { 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, }); 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>
|