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

地名检索移动到指定坐标

需求

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

技术点

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

实现

第一步：在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()
}

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

地名检索移动到指定坐标

需求

技术点

实现

解析

圆形区域内检索

需求

技术点

实现

解析

猜你喜欢