功能1:拖拽条控制小汽车在路线的位置,
功能2:小汽车移动速度功能,
功能3:小汽车移动时视角追随。
功能4:可在初始时候生成路线,也可在小汽车移动时实时生成路线
功能5:小汽车可跟随路线进行自动旋转角度,附带截图
代码里注释齐全,可便于二次开发,目前已经抽组件
1.首先在public/index里复制如下代码:作用为引入百度地图api
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= webpackConfig.name %></title>
<!-- <script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak=您的秘钥"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script> -->
<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=3.0&ak=您的秘钥"></script> -->
<script src="https://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>
<!-- <script type="text/javascript"
src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的秘钥"></script> -->
<script
type="text/javascript"
src="https://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"
></script>
<!-- <script src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script> -->
<!-- <script src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script> -->
<!-- <script src="https://api.map.baidu.com/api?type=webgl&v=3.0&ak=您的秘钥"></script> -->
<script src="https://mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
<script
type="text/javascript"
src="https://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"
></script>
<!-- <script
type="text/javascript"
src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"
></script> -->
</head>
<body>
<noscript>
<strong
>We're sorry but <%= webpackConfig.name %> doesn't work properly without
JavaScript enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script>
var lushu;
var BMapGL;
var map;
var BMapLib;
</script>
<!-- <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script> -->
<script>
// 初始化
// var vConsole = new VConsole();
// console.log("Hello world");
</script>
</html>
下面是vue的父组件,可以先复制上去后进行修改
<template>
<MapTrack
:mapList="mapList"
:strokeColor="strokeColor"
:stroke="stroke"
:speed="speed"
ref="map"
:sliderValue="sliderValue"
@onMove="onMove"
></MapTrack>
<button id="run" @click="lushuStart" style="line-height: 200px">开始</button>
<button id="stop" @click="lushuStop">停止</button>
<button id="pause" @click="lushupause">暂停</button>
<button id="pause" @click="speedAdd('加速')">加速</button>
<button id="pause" @click="speedAdd('减速')">减速</button>
<van-slider
:clickable-area-width="0"
v-model="sliderValue"
:max="mapList.arrPois.length"
@drag-start="drag('按下')"
@drag-end="drag('松开')"
@update:model-value="drag('滑动')"
/>
</template>
<script>
import {
ref } from "vue";
import MapTrack from "@/components/mapTrack.vue";
import {
Toast } from "vant";
export default {
components: {
MapTrack,
},
setup() {
const mapList = ref({
enableScrollWheelZoom: true,
centerSize: 17,
maplng: 113.928524,
maplat: 22.642619,
arrPois: [
new BMap.Point(116.403984, 39.914004),
new BMap.Point(116.402116, 39.913938),
new BMap.Point(116.402116, 39.913938),
new BMap.Point(116.402046, 39.913928),
new BMap.Point(116.401856, 39.913927),
new BMap.Point(116.401547, 39.913926),
new BMap.Point(116.401008, 39.913923),
new BMap.Point(116.400599, 39.913921),
new BMap.Point(116.39999, 39.913908),
new BMap.Point(116.399471, 39.913875),
new BMap.Point(116.399042, 39.913852),
new BMap.Point(116.398035, 39.913835),
new BMap.Point(116.395593, 39.913683),
new BMap.Point(116.395383, 39.913681),
new BMap.Point(116.395114, 39.913658),
new BMap.Point(116.394666, 39.913664),
new BMap.Point(116.390265, 39.91349),
new BMap.Point(116.38925, 39.913456),
new BMap.Point(116.388931, 39.913461),
new BMap.Point(116.388643, 39.913457),
new BMap.Point(116.388335, 39.913463),
new BMap.Point(116.386455, 39.913424),
new BMap.Point(116.386166, 39.913429),
new BMap.Point(116.385898, 39.913425),
new BMap.Point(116.384327, 39.913399),
new BMap.Point(116.384168, 39.913396),
new BMap.Point(116.38384, 39.913391),
new BMap.Point(116.383472, 39.913395),
new BMap.Point(116.383323, 39.913402),
new BMap.Point(116.382796, 39.913403),
new BMap.Point(116.382747, 39.913402),
new BMap.Point(116.38227, 39.913394),
new BMap.Point(116.381594, 39.913372),
new BMap.Point(116.381465, 39.91337),
new BMap.Point(116.381445, 39.913369),
new BMap.Point(116.381197, 39.913365),
new BMap.Point(116.380779, 39.913348),
new BMap.Point(116.38066, 39.913346),
new BMap.Point(116.380491, 39.913343),
new BMap.Point(116.380488, 39.913341),
new BMap.Point(116.38014, 39.913344),
new BMap.Point(116.379435, 39.913342),
new BMap.Point(116.378848, 39.913331),
new BMap.Point(116.378103, 39.913307),
new BMap.Point(116.376722, 39.913282),
new BMap.Point(116.374238, 39.913227),
new BMap.Point(116.373105, 39.913226),
new BMap.Point(116.37221, 39.91321),
new BMap.Point(116.370004, 39.913171),
new BMap.Point(116.369865, 39.913169),
new BMap.Point(116.369706, 39.913166),
new BMap.Point(116.369616, 39.913175),
new BMap.Point(116.366474, 39.913103),
new BMap.Point(116.366276, 39.913109),
new BMap.Point(116.365997, 39.913105),
new BMap.Point(116.365898, 39.913104),
new BMap.Point(116.365639, 39.91312),
new BMap.Point(116.364605, 39.913094),
new BMap.Point(116.364127, 39.913087),
new BMap.Point(116.364126, 39.913086),
new BMap.Point(116.363917, 39.913193),
new BMap.Point(116.363827, 39.913262),
new BMap.Point(116.363797, 39.913311),
new BMap.Point(116.363767, 39.913391),
new BMap.Point(116.363767, 39.913541),
new BMap.Point(116.363757, 39.913771),
new BMap.Point(116.363757, 39.913821),
new BMap.Point(116.363737, 39.91432),
new BMap.Point(116.363687, 39.914809),
new BMap.Point(116.363647, 39.915039),
new BMap.Point(116.363617, 39.915198),
new BMap.Point(116.363567, 39.915377),
new BMap.Point(116.363527, 39.915527),
new BMap.Point(116.363487, 39.915676),
new BMap.Point(116.363438, 39.915905),
new BMap.Point(116.363436, 39.915905),
new BMap.Point(116.363327, 39.916154),
new BMap.Point(116.363327, 39.916154),
new BMap.Point(116.363356, 39.916444),
new BMap.Point(116.363376, 39.916694),
new BMap.Point(116.363504, 39.917936),
new BMap.Point(116.363404, 39.918974),
new BMap.Point(116.363384, 39.919494),
new BMap.Point(116.363374, 39.919673),
new BMap.Point(116.363374, 39.919723),
new BMap.Point(116.363374, 39.919763),
new BMap.Point(116.363374, 39.919813),
new BMap.Point(116.363364, 39.920293),
new BMap.Point(116.363364, 39.920393),
new BMap.Point(116.363273, 39.922131),
new BMap.Point(116.363263, 39.922441),
new BMap.Point(116.363192, 39.92405),
new BMap.Point(116.363183, 39.92422),
new BMap.Point(116.363183, 39.9243),
new BMap.Point(116.363173, 39.92446),
new BMap.Point(116.363122, 39.925599),
new BMap.Point(116.363112, 39.925818),
new BMap.Point(116.363072, 39.926798),
new BMap.Point(116.363052, 39.927057),
new BMap.Point(116.363042, 39.927277),
new BMap.Point(116.363002, 39.928407),
new BMap.Point(116.362952, 39.929326),
new BMap.Point(116.362952, 39.929466),
new BMap.Point(116.362942, 39.929486),
new BMap.Point(116.362842, 39.931454),
new BMap.Point(116.362822, 39.931694),
new BMap.Point(116.362822, 39.931834),
new BMap.Point(116.362802, 39.932393),
new BMap.Point(116.362772, 39.933293),
new BMap.Point(116.362763, 39.933313),
new BMap.Point(116.362683, 39.934892),
new BMap.Point(116.362603, 39.936531),
new BMap.Point(116.362544, 39.93769),
new BMap.Point(116.362524, 39.93804),
new