【vue-baidu-map】地址搜索

最新推荐文章于 2024-09-06 16:12:22 发布

宾果的救星

最新推荐文章于 2024-09-06 16:12:22 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： # 地图GIS 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/wuli_youhouli/article/details/128109187

地图GIS 专栏收录该内容

19 篇文章

订阅专栏

该文章描述了一个Vue.js组件，用于实现基于关键词的地址搜索功能。用户可以输入关键字，搜索地图上的位置，结果显示在弹窗中，包括地址和经纬度。用户确认选择后，坐标和地址将被赋值给外部表单。该组件利用了百度地图API进行地理定位和搜索。

地址搜索

需求

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

实现

第一步：设置初始值

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