地名检索移动到指定坐标
需求
在输入框中搜索，在下拉列表中浮动，右侧出现高亮的列表集。选中之后移动到指定坐标。
技术点
官网地址： 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 = this
this.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.value
that.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.value
that.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 = this
this.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()
}
