vue实现百度地图按地区检索获取选中点位置及经纬度坐标

一、首先在项目中安装百度地图组件   
 $ npm install vue-baidu-map --save

二、我这里选择局部注册组件

import {BaiduMap,BmNavigation,BmView,BmGeolocation,BmCityList,BmLocalSearch} from 'vue-baidu-map'
components: {
 Pagination,
 BaiduMap,
 BmNavigation,
 BmView,
 BmGeolocation,
 BmCityList,
 BmLocalSearch
},

三、html部分:

    <template>
      <el-dialog title="选择隐患位置" :visible.sync="mapVisible" :fullscreen=false  id="mapDialog" :close-on-click-modal="false" style="margin-top: 8.5vh;">
        <div style="margin-bottom: 10px">
          <label>关键词：<input v-model="keyword" class="lineinput" style="width:200px" size="mini"></label>
          <label>地区：<input v-model="location2" class="lineinput" style="width:200px" size="mini"></label>
        </div>
        <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler"
                   :scroll-wheel-zoom="true"
                   @click="clickEvent"
                   ak="你的ak">
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
          <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
          <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"  :showAddressBar="true" :autoLocation="true" @locationSuccess="getLoctionSuccess" ></bm-geolocation>
          <bm-view :style="{width:'100%',height: '300px',flex: 1,marginTop:'0px'}"></bm-view>
          <bm-local-search :keyword="keyword" :auto-viewport="false" :location="location2" style="height: 150px;overflow-y: scroll;margin: 2px 0"></bm-local-search>
        </baidu-map>
        <div class="demo-input-suffix" style="margin-top: 2vh">
          <el-link type="info">经度：</el-link><el-input  class="lineinput"  style="width:200px" size="mini" v-model.number="locData.longitude" :disabled="true"></el-input>
          <el-link type="info"> 纬度：</el-link><el-input  class="lineinput"  style="width:200px" size="mini" v-model.number="locData.latitude" :disabled="true"></el-input>
          <el-link type="info"> 位置：</el-link><el-input  class="lineinput"  style="width:200px" size="mini" v-model="locData.address" :disabled="true"></el-input>
        </div>
        <div slot="footer" class="dialog-footer" style="margin-top: -30px">
          <el-button type="warning"  size="small" icon="el-icon-close" @click.native="mapVisible = false">取消</el-button>
          <el-button type="primary" size="small" icon="el-icon-check" @click.native="findlocation">确定</el-button>
        </div>
      </el-dialog>
    </template>
  </div>
</template>

四、js部分

data() {
   return {
      location2: '呼和浩特市',
      keyword: '东二环路',
      center: {lng: 111.752912, lat: 40.832246},
      zoom: 12,
      mapVisible:false,
      locData:{
          longitude:'',
          latitude:'',
          address:'',
         },
     iconUrl:'http://api0.map.bdimg.com/images/marker_red_sprite.png',
     }
}

methods: {

handler ({BMap, map}) {
  let _this = this;  // 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
  let geolocation = new BMap.Geolocation();
  geolocation.getCurrentPosition(function(r){
    console.log(r);
    _this.center = {lng: r.longitude, lat: r.latitude};   // 设置center属性值
    _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};  // 自定义覆盖物
    _this.initLocation = true;
  },{enableHighAccuracy: true})
  window.map = map;
},
//点击地图监听
clickEvent(e){
  map.clearOverlays();
  let Icon_0 = new BMap.Icon("http://api0.map.bdimg.com/images/marker_red_sprite.png", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 25)});
  let myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat),{icon: Icon_0});
  map.addOverlay(myMarker);
  //用所定位的经纬度查找所在地省市街道等信息
  let point = new BMap.Point(e.point.lng, e.point.lat);
  let gc = new BMap.Geocoder();
  let _this = this;
  gc.getLocation(point, function (rs) {
    let addComp = rs.addressComponents;
    _this.locData.address = rs.address;

  });
  this.locData.longitude = e.point.lng;
  this.locData.latitude = e.point.lat;
},
//定位成功回调
getLoctionSuccess(point, AddressComponent, marker){
  map.clearOverlays();
  let Icon_0 = new BMap.Icon("http://api0.map.bdimg.com/images/marker_red_sprite.png", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
  let myMarker = new BMap.Marker(new BMap.Point(point.point.lng, point.point.lat),{icon: Icon_0});
  map.addOverlay(myMarker);
  this.locData.longitude = point.point.lng;
  this.locData.latitude = point.point.lat;
},
//返回选中点的位置
findlocation(){
  this.$emit("findlocdata",this.locData)
  this.temp.location=this.keyword
  this.temp.lng=this.locData.longitude
  this.temp.lat=this.locData.latitude
  this.mapVisible = false
},
}
五、最终效果图如下: