使用百度lushu+vue3+vant，根据自已的坐标生成路线

最新推荐文章于 2024-04-29 23:22:27 发布

VIP文章 kriserger

最新推荐文章于 2024-04-29 23:22:27 发布

阅读量251

点赞数

文章标签：百度 javascript vue.js

本文链接：https://blog.csdn.net/eno_lin/article/details/130508956

版权

功能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

最低0.47元/天解锁文章

kriserger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用百度lushu+vue3+vant，根据自已的坐标生成路线

我这边的子组件是mapTrack所以引入的components也是mapTrack，各位可以改一下。1.首先在public/index里复制如下代码：作用为引入百度地图api。功能4：可在初始时候生成路线，也可在小汽车移动时实时生成路线。功能5：小汽车可跟随路线进行自动旋转角度，附带截图。代码里注释齐全，可便于二次开发，目前已经抽组件。下面是vue的父组件，可以先复制上去后进行修改。功能1：拖拽条控制小汽车在路线的位置，功能3：小汽车移动时视角追随。功能2：小汽车移动速度功能，
复制链接

扫一扫