ylrz_his_scrm_adminUI/src/views/components/getPoint_Map.vue

<template>
<!--地图取点（获取经纬度）-->
  <el-dialog :visible.sync="dialogVisible" :title="title" size="tiny"  :showClose="false" @close="cancel">
    <div class="mapStyle">
      <div class="mapLeftStyle">
        <el-input v-model="lon" placeholder="请输入经度" class="inputDUStyle" />
        <el-input v-model="lat" placeholder="请输入纬度" class="inputDUStyle" />
        <el-autocomplete
          style="width:100%;"
          popper-class="autoAddressClass"
          :popper-append-to-body="false"
          v-model="search"
          :fetch-suggestions="querySearchAsync"
          :trigger-on-focus="false"
          placeholder="详细地址"
          @select="handleSelect"
          clearable>
          <template slot-scope="{ item }">
            <i class="el-icon-location fl mgr10" style="margin-top: 10px;"></i>
            <div style="overflow:hidden;">
              <div class="title">{{ item.title }}</div>
              <span class="address ellipsis">{{ item.address }}</span>
            </div>
          </template>
        </el-autocomplete>
        </div>
      <div class="mapRightStyle">

        <baidu-map
          ak="7vzd6NZ0eTMsK6xxlv13MVcnThGYIG3q"
          scroll-wheel-zoom
          @ready="mapReady"
        >
          <!--地图视图-->

          <bm-view class="map"></bm-view>

          <!--显示更多-->

          <!--              <div class="more_panel">-->
          <!--        <span :class="{ down: isShowPanel }" @click.stop="showPanel">-->
          <!--          <span>{{ isShowPanel ? "隐藏" : "显示" }}</span-->
          <!--          >搜索列表<i class="el-icon-d-arrow-right"></i>-->
          <!--        </span>-->
          <!--              </div>-->

          <!--搜索-->

          <bm-local-search
            :keyword="keyword"
            :panel="isShowPanel"
            auto-viewport
            :zoom="10"
            style="display: none;"
            :location="location"
          ></bm-local-search>

          <!--点标注-->
          <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT" />
          <bm-marker-clusterer averageCenter>
            <bm-marker :position="location" />
          </bm-marker-clusterer>
        </baidu-map>

      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="sure">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow"; //标注弹窗
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmView from "vue-baidu-map/components/map/MapView.vue";
import BmNavigation from "vue-baidu-map/components/controls/Navigation";
import BmMarkerClusterer from "vue-baidu-map/components/extra/MarkerClusterer";
import BmMarker from "vue-baidu-map/components/overlays/Marker";
import BmLocalSearch from "vue-baidu-map/components/search/LocalSearch.vue";
let geocoder;
export default {
  name: 'getPoint_Map',
  props:{
    dialogVisible:Boolean,
    title:String,
  },
  components: {
    BaiduMap,
    BmView,
    BmNavigation,
    BmMarkerClusterer,
    BmMarker,
    BmLocalSearch,
    BmInfoWindow,
  },
  data(){
    return{
      lon:"",
      lat:"",
      search:"",
      keyword:"",
      map:{},
      BMap:{},
      mk:"",
      isShowPanel: true,
      location: {
        lng: 104.081534,
        lat: 30.655822
      },
    }
  },
  methods:{
    mapfrom(m){
     this.lon= m.lng
     this.lat= m.lat
     this.search= m.address
     this.keyword=m.address
    },
    mapReady({ BMap, map }) {

      this.BMap = BMap;
      this.map = map;

      geocoder = new BMap.Geocoder(); //创建地址解析器的实例
      if(this.search != ''){
        this.keyword = this.search
      }else{
        this.map.centerAndZoom(new BMap.Point(104.081534,30.655822), 16);
      }
      map.addEventListener("click", ({ point }) => {
        this.location.lng = point.lng;
        this.location.lat = point.lat;
        geocoder.getLocation(point, res => {
          this.search = res.address;
          this.lon = point.lng
          this.lat = point.lat
          this.$forceUpdate();
        });
      });
    },
    querySearchAsync(str,cb){
      var options = {
        onSearchComplete: function(res){ //检索完成后的回调函数
          var s = [];
          if (local.getStatus() == BMAP_STATUS_SUCCESS){
            for (var i = 0; i < res.getCurrentNumPois(); i ++){
              s.push(res.getPoi(i));
            }
            cb(s) //获取到数据时，通过回调函数cb返回到<el-autocomplete>组件中进行显示
          } else{
            cb(s)
          }
        }
      }
      var local = new BMap.LocalSearch(this.map, options) //创建LocalSearch构造函数
      local.search(str) //调用search方法，根据检索词str发起检索
    },
    handleSelect(item) {
      console.log(item.address);
      console.log(item.title);
      this.search = item.address + item.title; //记录详细地址，含建筑物名
      this.lon = item.point.lng
      this.lat = item.point.lat//记录当前选中地址坐标
      this.map.clearOverlays() //清除地图上所有覆盖物
      this.mk = new BMap.Marker(item.point) //根据所选坐标重新创建Marker
      this.map.addOverlay(this.mk) //将覆盖物重新添加到地图中
      this.map.panTo(item.point) //将地图的中心点更改为选定坐标点
    },
    cancel(){
      this.$emit('cancel')
    },
    sure(){
      this.$emit('sure',{lon:this.lon,lat:this.lat,search:this.search})
    },
  },
}
</script>

<style lang="scss" scoped>
.el-autocomplete-suggestion li{
  .title{
    font-size: 15px;
    color: #000;
  }
  .address{
    white-space: break-spaces;
    font-size: 12px;
  }
}
.mapStyle{
  width: 100%;
  .mapLeftStyle{
    width: 30%;
    margin-right: 5px;
    display: inline-block;
    .inputDUStyle{
      display: inline-block;
      width: 47%;
    }
    .inputDUStyle:first-child{
      margin-right: 1rem;
    }
    .inputDUStyle{
      margin-bottom: 1rem;
    }

  }
  .mapRightStyle{
    width: 68%;
    display: inline-block;
    vertical-align: top;
    .map {
      width: 100%;
      height: 500px;

    }

  }
}
</style>