--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> ---效果显示
标签：map,const,val,point,value,地址,搜索,new,百度 From： https://www.cnblogs.com/fenxiangboke/p/17154505.html