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);
				}
			},
			
			
			
			
		}

　

 

寫的很粗糙，別介意 有錯的望指導,覺得可以的盼望打賞小弟