vue里使用百度地图绘制行进路线展示或者起始点展示

最新推荐文章于 2024-03-12 09:04:49 发布

m0_52611940

最新推荐文章于 2024-03-12 09:04:49 发布

阅读量659

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_52611940/article/details/130851599

版权

先安装百度地图的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