vue + 百度地图 地址搜索并定位

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)
}