实现效果
申请KEY/安装插件
点击这个链接注册账号https://lbsyun.baidu.com/https://lbsyun.baidu.com/
然后按图操作
安装插件
npm install vue-baidu-map --save
引用
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'YOUR_APP_KEY'
})
使用第三方组件库路书,可以直接把代码复制下来再修改
代码
简单来说就是修改标签里的start和end值来改变起始点
然后修改play值,改过起终点后让play值重新false->true就会重新绘制路线播放行车动画
如果不要行车动画更简单,根本不用管play值,改起始点就行了
扫描二维码关注公众号,回复:
14720874 查看本文章
<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>
完成