实现效果
申请KEY/安装插件
点击这个链接注册账号//
然后按图操作
安装插件
操作都在这个链接https://dafrok.github.io/vue-baidu-map/#/zh/start/installationhttps://dafrok.github.io/vue-baidu-map/#/zh/start/installation
npm install vue-baidu-map --save
引用
import Vue from 'vue'import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {// ak 是在百度地图开发者平台申请的密钥 详见 /apiconsole/key */ak: 'YOUR_APP_KEY'})
使用第三方组件库路书，可以直接把代码复制下来再修改
代码
简单来说就是修改标签里的start和end值来改变起始点
然后修改play值，改过起终点后让play值重新false->true就会重新绘制路线播放行车动画
如果不要行车动画更简单，根本不用管play值，改起始点就行了
<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./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.valuethis.end = this.$refs.end.valuethis.play = true}}}</script><style scoped>.map {height: 400px;width: 100%;}</style>
完成
