博客

地址搜索

需求

根据地名搜索，选择地图中的地点。

实现

第一步：设置初始值

data(){
  return { 
    BMap:null,
    myGeo:null,
    show_adr:false,
    zoom: 13,
    center: { lng: 118.83, lat: 31.95 },
    keyword:'',
    location:'南京',
    modal:{
      adr:'',
      point:''
    }
  };
}

第二步：设置弹窗

<el-dialog title="坐标" :visible.sync="show_adr" width="50%">
  <div class="latitude">关键词：<el-input v-model="keyword" style="width: 300px" placeholder="请输入关键字"/></div>
  <div class="latitude">地址：{{modal.adr}}</div>
  <div class="latitude">经纬度：{{modal.point}}</div> 
  <baidu-map
    class="map"
    center="江宁"
    :zoom="zoom"
    @ready="handler"
    style="height: 300px"
    :scroll-wheel-zoom="true"
  >
    <bm-local-search 
      class="map_search"
      :keyword="keyword" 
      :auto-viewport="true" 
      :location="location"
      :page-capacity="100"
      @infohtmlset="search"
    ></bm-local-search>
  </baidu-map>
  <span slot="footer" class="dialog-footer">
    <el-button @click="show_adr = false">取 消</el-button>
    <el-button type="primary" @click="submit_adr()">确 定</el-button>
  </span>
</el-dialog>

handler({ BMap }) {
    this.BMap = BMap;
},

第三步：搜索地址

search(e) {
  this.modal.adr = e.address
  this.modal.point = e.point.lng + "," + e.point.lat
},
 

第四步：确认地址，提交弹窗

clickAddress() {
  this.modal.point = ''
  this.modal.adr=''
  this.keyword = ''
  this.center = { lng: 118.83, lat: 31.95 }
  this.show_adr = true;
}, 
submit_adr() {
  // 赋值给弹窗外的表单
  this.form.point = this.modal.point
  this.form.adr = this.modal.adr
  this.show_adr = false
},