【百度 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()
}