先安装百度地图的npm vue-baidu-map

npm i --save vue-baidu-map

再main.js页面引入

import BaiduMap from 'vue-baidu-map'
 
Vue.use(BaiduMap, {
    ak: 'I63Kb12LFglewQWaqA3M3EqierucDVjb'//百度地图密钥
});
<template>
  <div class="">
    <baidu-map class="map" :center="{ lng: 116.404, lat: 39.915 }" :zoom="11">
      <bm-driving
        :start="start"
        :end="end"
        @searchcomplete="handleSearchComplete"
        :panel="false"
        @stop="reset"
        :autoViewport="true"
      ></bm-driving>
      <bml-lushu :path="path" :icon="icon" :play="play" :rotation="true">
      </bml-lushu>
    </baidu-map>
    <input ref="start" placeholder="请输入起点" value="汉字过后" />
    <input ref="end" placeholder="请输入终点" value="百度大厦" />
    <button type="button" @click="confirm">确认</button>
  </div>
</template>
 
<script>
import { BmlLushu } from "vue-baidu-map";
export default {
  computed: {},
  components: {
    BmlLushu,
  },
  data() {
    return {
      play: false,
      path: [],
      icon: {
        url: "http://api.map.baidu.com/library/LuShu/1.2/examples/car.png",
        size: {
          width: 52,
          height: 26,
        },
        opts: {
          anchor: {
            width: 27,
            height: 13,
          },
        },
      },
      start: "天安门",
      end: "百度大厦",
    };
  },
  methods: {
    reset() {
      this.play = false;
    },
    handleSearchComplete(res) {
      this.path = res.getPlan(0).getRoute(0).getPath();
    },
    confirm() {
      this.start = this.$refs.start.value;
      this.end = this.$refs.end.value;
      this.play = true;
    },
  },
};
</script>
 
<style scoped>
.map {
  height: 400px;
  width: 100%;
}
</style>

简单来说就是修改标签里的start和end值来改变起始点

然后修改play值,改过起终点后让play值重新false->true就会重新绘制路线播放行车动画

如果不要行车动画更简单,根本不用管play值,改起始点就行了
参考文章:
https://blog.csdn.net/shinjie1210/article/details/120498951

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐