1、先上效果图
2、实现方法:
<el-input v-model="searchKey" clearable placeholder="请输入搜索地址" @keyup.enter.native="mapSearch"><el-button slot="append" icon="el-icon-search" @click="mapSearch" /></el-input>methods:init(){const map = new BMapGL.Map('map') // 创建地图实例...this.map = map}mapSearch(){//创建地址解析器实例var myGeo = new BMapGL.Geocoder();// 将地址解析结果显示在地图上,并调整地图视野myGeo.getPoint(this.searchKey, (point)=>{if(point){this.map.clearOverlays() // 清空地图上的覆盖物this.map.centerAndZoom(point, 12)this.map.addOverlay(new BMapGL.Marker(point)) //重新绘制当前位置覆盖物-marker点myGeo.getLocation(point, (rs) => {console.log('当前位置详细信息---',rs)})}else{// alert('您选择的地址没有解析到结果!');this.$message({type: 'error',message: '您输入的地址没有解析到结果!请重新输入'})this.searchKey = '' // 清空搜索框}},this.searchKey)}