vue&百度地图绘制行进路线/路书/路线规划/线路展示

实现效果

 申请KEY/安装插件

点击这个链接注册账号https://lbsyun.baidu.com/https://lbsyun.baidu.com/

然后按图操作

安装插件 

操作都在这个链接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 是在百度地图开发者平台申请的密钥 详见 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>

完成