百度地图地址搜索

--Vue页面html　

　<!--<div id="work_map"></div>-->

    <div class="div-fenrig">

      <el-input v-model="addrkeyword" placeholder="请输入查询地址" />

      <el-button

        link

        type="primary"

        size="small"

        @click.prevent="funSearch"

      >

        查询

      </el-button>

    </div>

    <div class="div-renshowtxt" v-if="isshowtxt">

      <div class="div-img-wh"><svg-icon name="close-small" class="card-icon" @click="closeText"/></div>

      <el-row>

        <el-col :lg="24" v-for="(item,index) in addrinfodata" style="padding-bottom: 10px;" @click="showTxtPosition(item)">

          <el-row :class="item.ckecktxt?'ckTxt-res':''">

            <el-col :lg="2"><div>{{ String.fromCharCode(65+index) }}</div></el-col>

            <el-col :lg="11"><div class="title">{{ item.title}}</div></el-col>

            <el-col :lg="11"><div>地址：<span class="rout">{{ item.address}}</span></div></el-col>

          </el-row>

        </el-col>

      </el-row>

    </div>

 

--页面js

<script setup>

//必须引用百度地图pai

//加载地图

const map = ref();

const initMap = () => {

  map.value = new BMap.Map("work_map"); // 创建地图Map实例

  // const geolocation = new BMap.Geolocation();

  // const point = new BMap.Point(114.038, 22.6573);

  // map.value.panTo(point);

  // geolocation.getCurrentPosition(function (r) {

  //   if (!r) {

  //     mapRef.value.centerAndZoom("深圳", 13);

  //     return;

  //   }

  //   map.value.centerAndZoom(new BMap.Point(r.point.lng, r.point.lat), 13); // 初始化地图,设置中心点坐标和地图级别

  // });

  const point = new BMap.Point(116.331398, 39.897445);

  map.value.centerAndZoom("深圳", 12);

  map.value.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

};

 

//智能搜索Localsearch类

const options = ref({renderOptions: {map:map.value, panel: "results"}});

const myLocalsearch =ref(new BMap.LocalSearch(map.value,options.value));

const addrkeyword=ref();

const addrinfodata=ref();

const isshowtxt=ref(false);

//模糊查询search方法

const funSearch = ()=>{

    if(addrkeyword.value){

      myLocalsearch.value.search(addrkeyword.value);

      myLocalsearch.value.setSearchCompleteCallback(function(rs){

        if (myLocalsearch.value.getStatus() == BMAP_STATUS_SUCCESS){  

            if (rs.getCurrentNumPois()>0) {

              isshowtxt.value=true;

            }

            var poiarr=[];

            for (let j = 0; j < rs.getCurrentNumPois(); j++) {

                var poi=rs.getPoi(j);

                var infopoi={"title":poi.title,"address":poi.address,"lng":poi.point.lng,"lat":poi.point.lat,"ckecktxt":(j==0?true:false)};

                poiarr.push(infopoi);

                addrinfodata.value=poiarr;

            }

        }

      })

    }

}

//信息弹窗

const mapOneMarker=(val,point)=>{

    var opts={

        width: 230, // 信息窗口宽度

        // height: 100, // 信息窗口高度

        title: '<span style="color: #cc5522;font-size: 14px;">'+val.title+'</span>', // 信息窗口标题

    };

    var msg = '<span style="font-size: 13px;">地址:'+val.address+'</span>';

    var infoWindow=new BMap.InfoWindow(msg,opts);//创建信息窗口对象

    map.value.openInfoWindow(infoWindow,point);//打开信息窗口

};

//显示信息弹窗

const showTxtPosition=(val)=>{

    if (val) {

      var point=new BMap.Point(val.lng,val.lat);

      map.value.panTo(point);

      var point2=new BMap.Point(val.lng,val.lat+0.0001);

      mapOneMarker(val,point2)

      for (let i = 0; i < addrinfodata.value.length; i++) {

        if (addrinfodata.value[i].title==val.title && addrinfodata.value[i].address==val.address) {

          addrinfodata.value[i].ckecktxt=true;

        }else{

          addrinfodata.value[i].ckecktxt=false;

        }

      }

    }

}

//关闭清除地图标点

const closeText=()=>{

  isshowtxt.value = false

  map.value.clearOverlays();

}

</script>

 

--页面css

<style lang="scss" scoped>

.div-fenrig{

    background: rgb(255, 255, 255);

    color: rgb(0, 0, 0);

    border-radius: 8px;

    margin: 0px 20px;

    position: absolute;

    width: 230px;

    top: 20px;

    z-index: 100;

    padding: 5px 10px;

    display: flex;

    font-size: 13px;

    right: 359px;

  }

  .div-renshowtxt{

    background: rgb(255, 255, 255);color: rgb(0, 0, 0);border-radius: 8px;

    margin: 0px 20px;

    position: absolute;

    width: 300px;

    top: 54px;

    z-index: 100;

    padding: 5px 10px;

    font-size: 13px;

    right: 359px;  cursor: pointer;  height: 300px;overflow-x: hidden;

    overflow-y: auto;

   

    .div-img-wh{

      height: 30px;

      .card-icon{

        font-size: 25px;

        color: #000;

        margin: 0px 0px 0px 255px;

      }

    }

    .ckTxt-res{

      color:#4a59ff;

    }

  }

</style>

---效果显示