1.效果图

2.准备工作

cnpm install vue-baidu-map --save

在main.js中全局引入

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
	// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
	ak: 'sRDDfAKpCSG5iF1rvwph4Q95M6tDCApL'
})

3.html

<baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler">
				<div v-for="(marker,index) of markers" :key="index">
					<bm-marker class="bmMarker" :dragging="true" @click="infoWindowOpen(marker)"
						:position="{lng: marker.lng, lat: marker.lat}"
						:icon="{url:index == 0 ? mapIcon1 : mapIcon, size: {width: 25, height: 25}}">
                        <!-- 弹窗 -->
						<bm-info-window v-if="index !== 0" title="网点信息" :position="{lng: marker.lng, lat: marker.lat}"
							:show="marker.showFlag" @close="infoWindowClose(marker)" @open="infoWindowOpen(marker)">

							<div>{{marker.siteName}}</div>
							<div class="btn" @click="navigation(marker)">导航</div>
						</bm-info-window>
					</bm-marker>
				</div>
				<!-- 点击导航 实现路线图 -->
				<bm-driving v-if="navFlag" :start="nav.start" :end="nav.end" @searchcomplete="handleSearchComplete"
					:panel="false" :autoViewport="true"></bm-driving>
			</baidu-map>

4.js

// 渲染地图和点位
			handler({
				BMap,
				map
			}) {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					geocodeAccuracy: 'highAccuracy', // 设置高精度模式
					isHighAccuracy: true,
					success: function(res) {
						if (res) {
							that.center.lng = res.longitude
							that.center.lat = res.latitude
							that.markerPoint.lng = res.longitude
							that.markerPoint.lat = res.latitude

							console.log('当前位置的经度：' + that.center.lng);
							console.log('当前位置的纬度：' + that.center.lat);
							// that.zoom = 13
							that.zoom = 13
						}
					}
				});
			},    
//信息弹层 这两个方法一定要加
			infoWindowClose(marker) {
				this.$set(marker, 'showFlag', false);
				// marker.showFlag = false
				console.log(marker.showFlag, '11111111111111')
				// this.navFlag = false
			},
			infoWindowOpen(marker) {
				let that = this
				// 点击定位图标没有反应可能是因为在 Vue 中对象属性的动态添加和响应性问题导致的,在vue中动态添加一个对象属性,如果该属性不是响应式的，无法追踪到属性的变化，无法触发视图的更新，可以使用 Vue 提供的 $set 方法或者 Vue.set 方法来添加响应式属性，以便 Vue 监听到该属性的变化
				this.$set(marker, 'showFlag', true);
				// this.navFlag = true
				// this.nav.end = marker.siteAddress
				// console.log(marker.lng,marker.lat,'markermarkermarker')
				// var point = new BMap.Point(marker.lng,marker.lat);
				// var gc = new BMap.Geocoder();
				// gc.getLocation(point, function(rs) {
				// 	// console.log(rs,'222222222222222222222222')
				// 	rs = JSON.parse(JSON.stringify(rs))
				// 	that.nav.end = rs.address
				// 	// console.log(that.nav.end,'11111111222333')
				// });
				
			},
// 导航
			navigation(marker) {
				let that = this
				that.nav.end = marker.siteAddress
				 // 在显示新路径之前，先隐藏上一个路径
				that.navFlag = false;
				console.log(marker.lng,marker.lat,'markermarkermarker')
				var point = new BMap.Point(marker.lng,marker.lat);
				var gc = new BMap.Geocoder();
				gc.getLocation(point, function(rs) {
					// console.log(rs,'222222222222222222222222')
					rs = JSON.parse(JSON.stringify(rs))
					that.nav.end = rs.address
					that.navFlag = true
					console.log(that.nav.end,'11111111222333')
				});
				console.log(marker,'marker')
			},
			// 路线图
			handleSearchComplete(res) {
				console.log(res,'res')
				// if(res){
					this.path = res.getPlan(0).getRoute(0).getPath()
				// }
				
			},