【百度 JavaScript API v3.0】LocalSearch 位置检索、Autocomplete 结果提示

地名检索移动到指定坐标

需求

在输入框中搜索，在下拉列表中浮动，右侧出现高亮的列表集。选中之后移动到指定坐标。

技术点

官网地址： JavaScript API - 快速入门 | 百度地图API SDK

开发文档：百度地图JSAPI 3.0类参考

实现

第一步：在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">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div></div><!-- 右侧高亮值列表 --><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();//建立一个自动完成的对象var ac = new BMap.Autocomplete({    "input" : "suggestId","location" : this.map});//鼠标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})});// 鼠标点击下拉列表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;    //获取第一个智能搜索的结果that.map.centerAndZoom(p, 18);that.map.addOverlay(new BMap.Marker(p));    //添加标注}});local.search(keyword);});},
};
</script><style>
#map {width: 300px;height: 300px;
}
</style>

解析

设置一个自动完成类

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

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

 下拉列表展示，悬浮后右侧展示高亮值的列表

//鼠标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：

下拉列表显示后，点击某一项进行智能搜索

// 鼠标点击下拉列表
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;    //获取第一个智能搜索的结果that.map.centerAndZoom(p, 18);that.map.addOverlay(new BMap.Marker(p));    //添加标注}});local.search(keyword);
});

 

 

 

圆形区域内检索

需求

在圆形区域内检索，每页5条搜索结果。遍历所有结果后得到全部结果，然后添加所有的marker点。

技术点

官网地址： JavaScript API - 快速入门 | 百度地图API SDK

开发文档：百度地图JSAPI 3.0类参考

实现

第一步：在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();// 检索点var ResultArray = [];var local = new BMap.LocalSearch(that.map,{renderOptions : { map : that.map,},pageCapacity : 5,onMarkersSet:function (array) { console.log('标注添加完成后',array);},onInfoHtmlSet:function (LocalResultPoi) { console.log('标注气泡内容创建后',LocalResultPoi);},onResultsHtmlSet:function (element) {console.log('结果列表添加完成后',element);},onSearchComplete : function(results) {console.log('检索完成后',results)// 获取当前搜索总共有多少条结果var totalPages = results.getNumPages();//总页数var currPage = results.getPageIndex();// 当前第几页if (currPage < totalPages - 1) {ResultArray.push(...local.getResults().Ir);local.gotoPage(currPage + 1); } else {// 已经到达最后一页结果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 = "全部结果有：" + ResultArray.length + "------原本搜索结果有：" + results.getNumPois() + "------最近检索poi条数：" + results.getCurrentNumPois()}},});local.searchNearby('餐饮',that.point,1000);},
};
</script>
<style>
#map {width: 1300px;height: 1300px;
}
</style>

解析

在地图中先绘制圆形区域

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 标注气泡内容创建后

 onMarkersSet 标注添加完成后

 获取当前搜索总共有多少条结果

pageCapacity : 5, 每页展示条数 

// 获取当前搜索总共有多少条结果
var totalPages = results.getNumPages();//总页数
var currPage = results.getPageIndex();// 当前第几页
if (currPage < totalPages - 1) {ResultArray.push(...local.getResults().Ir);local.gotoPage(currPage + 1); 
} else {// 已经到达最后一页结果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 = "全部结果有：" + ResultArray.length + "------原本搜索结果有：" + results.getNumPois() + "------最近检索poi条数：" + results.getCurrentNumPois()
}