解決問題后的界面效果圖:
在開發中,獲取百度地圖API,輸入關鍵詞時觸發下拉列表時所遇到的問題:看下圖
用的示例是:http://lbsyun.baidu.com/jsdemo.htm#a6_2
// 百度地圖API功能 function G(id) { return document.getElementById(id); } var map = new BMap.Map("l-map"); map.centerAndZoom("北京",12); // 初始化地圖,設置城市和地圖級別。 var ac = new BMap.Autocomplete( //建立一個自動完成的對象 {"input" : "suggestId" ,"location" : map }); 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 index = " + e.fromitem.index + " value = " + value; value = ""; if (e.toitem.index > -1) { _value = e.toitem.value; value = _value.province + _value.city + _value.district + _value.street + _value.business; } str += " ToItem index = " + e.toitem.index + " 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 index = " + e.item.index + " myValue = " + myValue; setPlace(); }); function setPlace(){ map.clearOverlays(); //清除地圖上所有覆蓋物 function myFun(){ var pp = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結果 map.centerAndZoom(pp, 18); map.addOverlay(new BMap.Marker(pp)); //添加標注 } var local = new BMap.LocalSearch(map, { //智能搜索 onSearchComplete: myFun }); local.search(myValue); }
下面給出自己解決的方法:
html代碼:
<el-autocomplete class="inline-input" v-model="addressDetail" :fetch-suggestions="querySearch" placeholder="搜索您的街道、小區、大廈名稱" :trigger-on-focus="false" :maxlength="20" @select="handleSelect"> <template slot-scope="{ item }"> {{ item.address }}<span>{{item.city}}</span> </template> </el-autocomplete>
JS代碼:
export default { name: 'recover-page', data () { return { addressDetail : null, adderss : '', map: null, local: null, restaurants: [] } }, props: {}, watch: { addressDetail(val) {//監聽addressDetail的變化 this.local.search(val); } }, computed: {}, methods: { querySearch(queryString, cb) { let restaurants = []; restaurants = this.restaurants; let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants; // 調用 callback 返回建議列表的數據 cb(results); }, createFilter(queryString) { /*return (restaurant) => { return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0); };*/ return (restaurant) => { return restaurant } }, loadAll() { return this.restaurants; }, handleSelect(item) { console.log("item",item); this.map.clearOverlays(); this.addressDetail = item.address; const pp = item.point; this.map.centerAndZoom(pp, 15); this.map.addOverlay(new BMap.Marker(pp)); }, baiduMap : function () { //let map = new BMap.Map("allmap"); let _this = this; _this.map.centerAndZoom("廣州",12); // 初始化地圖,設置城市和地圖級別。 let geolocation =new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ if (this.getStatus()==BMAP_STATUS_SUCCESS) { let mk=new BMap.Marker(r.point); _this.map.addOverlay(mk); _this.map.panTo(r.point); //alert('您的位置:'+r.point.lng+','+r.point.lat); }else { //alert('您的手機不支持定位服務'); } }); _this.local = new BMap.LocalSearch(_this.map, { onSearchComplete: function(results){ // 判斷狀態是否正確 if (_this.local.getStatus() == BMAP_STATUS_SUCCESS){ _this.restaurants = []; for (let i = 0; i < results.getCurrentNumPois(); i ++){ _this.restaurants.push(results.getPoi(i)); } } } }); //_this.local.search(_this.addressDetail); }, }, components: { }, beforeCreate() { }, created() { }, mounted() { this.map = new BMap.Map("allmap"); this.$nextTick(()=>{ let t1 = setTimeout(()=>{ this.baiduMap(); clearTimeout(t1) },10); }); this.loadAll(); }, beforeMount() { }, beforeUpdate() { }, updated() { }, activated() { }, deactivated() { }, beforeDestroy() { }, destroyed() { }, errorCaptured() { } }
嗯,問題解決!
Copyright © 2009-2019 Ywcms.Com All Right Reserved. 湖南嚴微網絡科技有限公司©版權所有 湘ICP備16006489號-2