地名檢索移動(dòng)到指定坐標(biāo)

需求

在輸入框中搜索，在下拉列表中浮動(dòng)，右側(cè)出現(xiàn)高亮的列表集。選中之后移動(dòng)到指定坐標(biāo)。

技術(shù)點(diǎn)

官網(wǎng)地址：?JavaScript API - 快速入門(mén) | 百度地圖API SDK

開(kāi)發(fā)文檔：百度地圖JSAPI 3.0類參考

實(shí)現(xiàn)

第一步：在public的index.html中引入

<script src="http://api.map.baidu.com/api?v=3.0&ak=ak值" type="text/javascript"></script>

第二步：組件中使用

<template><div style="display: flex"><div><!-- 地圖 --><div id="map"></div><!-- 搜索框 --><div id="r-result">請(qǐng)輸入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div></div><!-- 右側(cè)高亮值列表 --><ul class="list"><li v-for="(item,index) in list" :key="index"><p>{{ item.index }}: {{ item.val }}</p></li></ul></div>
</template><script>
export default {data() {return {map: null,point: null,list: []};},mounted() {let that = thisthis.map = new BMap.Map("map");this.point = new BMap.Point(116.8414, 39.925)this.map.centerAndZoom(this.point, 17);this.map.enableScrollWheelZoom();//建立一個(gè)自動(dòng)完成的對(duì)象var ac = new BMap.Autocomplete({    "input" : "suggestId","location" : this.map});//鼠標(biāo)hover下拉列表ac.addEventListener("onhighlight", function(e) {  let val = e.toitem.valuethat.list.push({index: e.toitem.index,val: val.province + val.city +  val.district +  val.street +  val.business})});// 鼠標(biāo)點(diǎn)擊下拉列表ac.addEventListener("onconfirm", function(e) {    var v = e.item.value;var keyword = v.province +  v.city +  v.district +  v.street + v.business;//清除地圖上所有覆蓋物that.map.clearOverlays();    //智能搜索var local = new BMap.LocalSearch(that.map, { onSearchComplete: function (){var p = local.getResults().getPoi(0).point;    //獲取第一個(gè)智能搜索的結(jié)果that.map.centerAndZoom(p, 18);that.map.addOverlay(new BMap.Marker(p));    //添加標(biāo)注}});local.search(keyword);});},
};
</script><style>
#map {width: 300px;height: 300px;
}
</style>

解析

設(shè)置一個(gè)自動(dòng)完成類

<input type="text" id="suggestId"" value="百度"/></div>

//建立一個(gè)自動(dòng)完成的對(duì)象
var ac = new BMap.Autocomplete({    "input" : "suggestId","location" : this.map
});

?下拉列表展示，懸浮后右側(cè)展示高亮值的列表

//鼠標(biāo)hover下拉列表
ac.addEventListener("onhighlight", function(e) {  let val = e.toitem.valuethat.list.push({index: e.toitem.index,val: val.province + val.city +  val.district +  val.street +  val.business})
});

?onhighlight事件的返回值e：

下拉列表顯示后，點(diǎn)擊某一項(xiàng)進(jìn)行智能搜索

// 鼠標(biāo)點(diǎn)擊下拉列表
ac.addEventListener("onconfirm", function(e) {    var v = e.item.value;var keyword = v.province +  v.city +  v.district +  v.street + v.business;//清除地圖上所有覆蓋物that.map.clearOverlays();    //智能搜索var local = new BMap.LocalSearch(that.map, { onSearchComplete: function (){var p = local.getResults().getPoi(0).point;    //獲取第一個(gè)智能搜索的結(jié)果that.map.centerAndZoom(p, 18);that.map.addOverlay(new BMap.Marker(p));    //添加標(biāo)注}});local.search(keyword);
});

?

?

?

圓形區(qū)域內(nèi)檢索

需求

在圓形區(qū)域內(nèi)檢索，每頁(yè)5條搜索結(jié)果。遍歷所有結(jié)果后得到全部結(jié)果，然后添加所有的marker點(diǎn)。

技術(shù)點(diǎn)

官網(wǎng)地址：?JavaScript API - 快速入門(mén) | 百度地圖API SDK

開(kāi)發(fā)文檔：百度地圖JSAPI 3.0類參考

實(shí)現(xiàn)

第一步：在public的index.html中引入

<script src="http://api.map.baidu.com/api?v=3.0&ak=ak值" type="text/javascript"></script>

第二步：組件中使用

<template><div><div id="map"></div><p>{{ info }}</p></div>
</template><script>
export default {data() {return {map: null,point: null,info: ''};},mounted() {let that = thisthis.map = new BMap.Map("map");this.point = new BMap.Point(116.331398,39.897445)this.map.centerAndZoom(this.point, 17);this.map.enableScrollWheelZoom();// 范圍var circle = new BMap.Circle(this.point, 1000, {fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});that.map.addOverlay(circle);circle.disableMassClear();// 檢索點(diǎn)var ResultArray = [];var local = new BMap.LocalSearch(that.map,{renderOptions : { map : that.map,},pageCapacity : 5,onMarkersSet:function (array) { console.log('標(biāo)注添加完成后',array);},onInfoHtmlSet:function (LocalResultPoi) { console.log('標(biāo)注氣泡內(nèi)容創(chuàng)建后',LocalResultPoi);},onResultsHtmlSet:function (element) {console.log('結(jié)果列表添加完成后',element);},onSearchComplete : function(results) {console.log('檢索完成后',results)// 獲取當(dāng)前搜索總共有多少條結(jié)果var totalPages = results.getNumPages();//總頁(yè)數(shù)var currPage = results.getPageIndex();// 當(dāng)前第幾頁(yè)if (currPage < totalPages - 1) {ResultArray.push(...local.getResults().Ir);local.gotoPage(currPage + 1); } else {// 已經(jīng)到達(dá)最后一頁(yè)結(jié)果ResultArray.push(...local.getResults().Ir);that.map.clearOverlays();for (var store of ResultArray){var marker = new BMap.Marker(store.point);that.map.addOverlay(marker);}that.info = "全部結(jié)果有：" + ResultArray.length + "------原本搜索結(jié)果有：" + results.getNumPois() + "------最近檢索poi條數(shù)：" + results.getCurrentNumPois()}},});local.searchNearby('餐飲',that.point,1000);},
};
</script>
<style>
#map {width: 1300px;height: 1300px;
}
</style>

解析

在地圖中先繪制圓形區(qū)域

circle.disableMassClear(); 保留這塊覆蓋物不被刪除

// 范圍
var circle = new BMap.Circle(this.point, 1000, {fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3
});
that.map.addOverlay(circle);
circle.disableMassClear();

onMarkersSet?檢索完成后

?

?onInfoHtmlSet?標(biāo)注氣泡內(nèi)容創(chuàng)建后

?onMarkersSet?標(biāo)注添加完成后

?獲取當(dāng)前搜索總共有多少條結(jié)果

pageCapacity : 5, 每頁(yè)展示條數(shù)?

// 獲取當(dāng)前搜索總共有多少條結(jié)果
var totalPages = results.getNumPages();//總頁(yè)數(shù)
var currPage = results.getPageIndex();// 當(dāng)前第幾頁(yè)
if (currPage < totalPages - 1) {ResultArray.push(...local.getResults().Ir);local.gotoPage(currPage + 1); 
} else {// 已經(jīng)到達(dá)最后一頁(yè)結(jié)果ResultArray.push(...local.getResults().Ir);that.map.clearOverlays();for (var store of ResultArray){var marker = new BMap.Marker(store.point);that.map.addOverlay(marker);}that.info = "全部結(jié)果有：" + ResultArray.length + "------原本搜索結(jié)果有：" + results.getNumPois() + "------最近檢索poi條數(shù)：" + results.getCurrentNumPois()
}