vue百度地图搜索提示+路径导航

 

 

 

 

 

 

 

data() {
　　return {

　　　　titleAddress:'',//开始自身位置
　　　　address_detail:''//结束位置

　　}

}

 

 

 

 

 

 

 

 

 

 css：

.container{
height: calc(100% - 2rem);
position: fixed !important;
width: 100%;
top: 2rem;
left: 0;
}

注意，注意，注意：此段css ，主要是为了提示信息的层级关系的存在一定要不然你的样式会被覆盖 最好是在公共样式里添加防止不生效

.tangram-suggestion {
z-index: 9999;
}

以上是全部内容 ：以下是全部代码

<div class="address-input" v-if="showInput">
					<i class="icon iconfont icon-daohang"></i>
					<input type="text" placeholder="越秀区" id="startAddress" v-model="titleAddress" style="width: 80%;">
				</div>
				<transition name="slide-fade">
				<div class="address-input">
					<i class="icon iconfont icon-daohang"></i>
					<input type="text" placeholder="目的地" v-model="address_detail" id="suggestId" style="width: 80%; padding: .2rem 0;">
					<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
				</div>
				</transition>


<div id="container" class="container"></div>

 data() {
            return {
                data: {},
				
				titleAddress:'',//开始自身位置
				address_detail:''//结束位置
            }
 }

mounted() {
			this.initMap();
		},
 methods: {
			 initMap () {
			   loadBMap('你的AK')
			  .then(() => {
				var _this = this;
				var geolocationb = new BMap.Geolocation();
					geolocationb.getCurrentPosition(function(r){
						_this.createMap(r) ; //创建地图
						_this.suggestId();
					})
			  })
			  .catch(err => {
			    console.log('地图加载失败')
			  })
			},
			createMap(r){
			 var mapRes = new BMap.Map('container')
			  mapRes.centerAndZoom(new BMap.Point(r.longitude,r.latitude), 20)
			  mapRes.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
			  mapRes.addControl(new BMap.NavigationControl()) // 添加平移缩放控件
			  mapRes.addControl(new BMap.OverviewMapControl()) // 添加缩略地图控件	
			  mapRes.addControl(new BMap.GeolocationControl({anchor:BMAP_ANCHOR_TOP_RIGHT})) // 添加定位控件
			  var localSearch = new BMap.LocalSearch(mapRes);
				localSearch.enableAutoViewport(); //允许自动调节窗体大小
				const myGeo = new BMap.Geocoder()
				myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), data => {
					 if (data) {
					  console.log(data.surroundingPois[0].address)
					  this.titleAddress = data.surroundingPois[0].address;
					 }
				})
				window.mapRes = mapRes;//将map变量存储在全局
				//坐标转换完之后的回调函数
				// function translateCallback(data){
				//   if(data.status === 0) {
				// 	var marker = new BMap.Marker(data.points[0]);
				// 	mapRes.addOverlay(marker);
				// 	var label = new BMap.Label("转换后的百度标注（正确）",{offset:new BMap.Size(20,-10)});
				// 	marker.setLabel(label); //添加百度label
				// 	mapRes.setCenter(data.points[0]);
				//   }
				// }
				// setTimeout(function(){
				// 	var convertor = new BMap.Convertor();
				// 	var pointArr = [];
				// 	pointArr.push(r.point);
				// 	convertor.translate(pointArr, 3, 5, translateCallback)
				// }, 1000);
			},
			suggestId(){
				// 百度地图API功能
				function G(id) {
					return document.getElementById(id);
				}

				                  // 初始化地图,设置城市和地图级别。

				var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
					{"input" : "suggestId"
					,"location" : mapRes
				});

				ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
				var str = "";
					var _value = e.fromitem.value;
					var value = "";
					if (e.fromitem.index > -1) {
						value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
					}    
					str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
					
					value = "";
					if (e.toitem.index > -1) {
						_value = e.toitem.value;
						value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
					}    
					str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
					G("searchResultPanel").innerHTML = str;
				});

				var myValue;
				ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
				var _value = e.item.value;
					myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
					G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
					
					setPlace();
				});
				var _this = this
				function setPlace(){
					mapRes.clearOverlays();    //清除地图上所有覆盖物
					function myFun(){
						var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
						mapRes.centerAndZoom(pp, 18);
					}
					var driving = new BMap.DrivingRoute(mapRes, { 
						renderOptions: { 
							map: mapRes, 
							autoViewport: true 
						} 
					});
					//重新设置路线颜色
					driving.setPolylinesSetCallback(function(result){
						var plan = driving.getResults().getPlan(0);
						  for(var i=0;i<plan.getNumRoutes();i++){
							var pts =plan.getRoute(i).getPath();
				　　　　		//重点在这   这个地方是关于修改颜色的
							var polyline = new BMap.Polyline(pts,{ strokeColor: "green", strokeWeight: 5, strokeOpacity: 1 });
							mapRes.addOverlay(polyline);
						  } 
					})
					driving.search(_this.titleAddress,myValue);
				}
			},
			
			
			
			
		}

　

 

写的很粗糙，别介意 有错的望指导,觉得可以的盼望打赏小弟