记录第一次使用百度地图选取点位

 封装的一个子组件 可以搜索 或者手动选取位置 传入经纬度 一镜到底可以直接用

<template>
    <!-- 地图选择组件 -->
    <div>
      <el-dialog
        :close-on-click-modal="false"
        :visible.sync="hVisible"
        width="30%"
      >
        <div class="form-layer">
          <el-form label-width="100px" size="mini">
            <!-- <el-form-item label="获取定位">
              <el-button type="primary" @click="fixedPos">重新定位</el-button>
            </el-form-item> -->
            <el-form-item label="当前经度">
              <span>{{longitude}}</span>
            </el-form-item>
            <el-form-item label="当前纬度">
              <span>{{latitude}}</span>
            </el-form-item>
            <el-form-item>
              <div class="f-a-c">
                <el-input id="suggestId" v-model="keyWords" placeholder="请输入地区" style="width: 230px;margin-right: 6px;"></el-input>
                <el-button type="primary" @click="setPlace" :disabled="!keyWords">查询</el-button>
              </div>
              <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
            </el-form-item>
          </el-form>
          <div id="map"></div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button
            size="small"
            type="primary"
            @click="btnSubmit()"
            >确 认</el-button
          >
          <el-button size="small" @click="hVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  <script>
    export default {
      name: "mapView",
      props:{
        visible:Boolean
      },
      data() {
        return {
          map: null,
          local: null,
          mk: null,
          pointss:null,
          latitude: '',
          longitude: '',
          keyWords: '',
          marker:'',
          addressy:''
        };
      },
      mounted(){
        this.initMap();
      },
      methods: {
        // 打开弹窗，name为弹窗名称
        // async openDialog(name) {
        //   this.text = name;
        //   this.hVisible = true;
        //   this.initMap();
        // },
        // 确认
        btnSubmit() {
            
            let key = {
                latitude: this.latitude,
                longitude: this.longitude,
                address:this.addressy
            }
            console.log(key,'key',this.addressy);
            // 打印经纬度
            this.$emit("successadd", key);
            this.hVisible = false;
        },
        initMap() {
          
          this.$nextTick(() => {
            this.map = new BMap.Map("map");
            let point = new BMap.Point(120.418, 36.133);
            this.map.centerAndZoom(point, 12);
            this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
            this.map.addControl(new BMap.NavigationControl());
            // 点击事件
            this.map.addEventListener("click", this.showInfo);
            
            // this.titleSearch()
            
            // this.fixedPos(); //重新定位
          });
        },
        //  G(id) {
        //   return document.getElementById(id);
        // },
        // // 输入后文字提示
        // titleSearch(){
        //   // 搜索
        //       var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        //       {"input" : "suggestId"
        //         ,"location" : this.map
        //       });
        //       ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
        //           var str = "";
        //           var _value = e.fromitem.value;
        //           var value = "";
        //           if (e.fromitem.index > -1) {
        //             value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        //           }    
        //           str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
                  
        //           value = "";
        //           if (e.toitem.index > -1) {
        //             _value = e.toitem.value;
        //             value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        //           }    
        //           str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        //           this.G("searchResultPanel").innerHTML = str;
        //       });

        //       var myValue;
        //         ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
        //           var _value = e.item.value;
        //             myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        //             this.G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
                    
        //             this.setPlace();
        //         });
        // },
        // 点击事件
        showInfo(e){
            let that = this
            that.latitude = e.point.lat  //经度
            that.longitude = e.point.lng //纬度
            // 每次点击增加点位
            that.pointss = new BMap.Point(that.longitude, that.latitude);   // 创建标注的点
            that.marker = new BMap.Marker(that.pointss); // 创建标注,           
            that.map.addOverlay(that.marker);
            // 清除上一次选取的点位
            let arr = that.map.getOverlays()
            if(arr.length>1){
                arr.forEach((item,index,input) => {
                    that.map.removeOverlay(input[index-1])
                })
            }
            let gc = new BMap.Geocoder();
            gc.getLocation(that.pointss, function (rs) {
              console.log(rs,'rsss');
                that.addressy = rs.address + rs.surroundingPois[0].title
                
            })
        },
        // 点击重新定位-定位到当前位置
        // fixedPos() {
        //   const _this = this;
        //   const geolocation = new BMap.Geolocation();
        //   this.confirmLoading = true;
        //   geolocation.getCurrentPosition(function (r) {
        //     if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        //       _this.handleMarker(_this, r.point);
        //       let myGeo = new BMap.Geocoder();
        //       myGeo.getLocation(
        //         new BMap.Point(r.point.lng, r.point.lat),
        //         function (result) {
        //           _this.confirmLoading = false;
        //           if (result) {
        //             _this.latitude = result.point.lat;
        //             _this.longitude = result.point.lng;
        //           }
        //         }
        //       );
        //     } else {
        //       _this.$message.error("failed" + this.getStatus());
        //     }
        //   });
        // },
        // 搜索地址
        setPlace() {
          this.local = new BMap.LocalSearch(this.map, {
            onSearchComplete: this.searchPlace,
          });
          this.local.search(this.keyWords);
        },
        searchPlace() {
          if (this.local.getResults() != undefined) {
            this.map.clearOverlays(); //清除地图上所有覆盖物
            if (this.local.getResults().getPoi(0)) {
              let point = this.local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
              this.map.centerAndZoom(point, 18);
              this.handleMarker(this, point);
              console.log("经度：" + point.lng + "--" + "纬度" + point.lat);
              this.latitude = point.lat;
              this.longitude = point.lng;
            } else {
              this.$message.error("未匹配到地点!");
            }
          } else {
            this.$message.error("未找到搜索结果!");
          }
        },
        // 设置标注
        handleMarker(obj, point) {
          let that = this;
          obj.mk = new BMap.Marker(point);
          obj.map.addOverlay(obj.mk);
          obj.mk.enableDragging(); // 可拖拽
          obj.mk.addEventListener("dragend", function (e) {
            // 监听标注的拖拽，获取拖拽后的经纬度
            that.latitude = e.point.lat;
            that.longitude = e.point.lng;
          });
          obj.map.panTo(point);
        },
      },
      computed: {
            hVisible: {
                get() {
                    return this.visible;
                },
                set(val) {
                    this.$emit("update:visible", val);
                },
            },
        },
    };
  </script>
  <style  lang="scss" scoped>
    .form-layer {
      width: 100%;
    }
    #map {
      margin-top: 30px;
      width: 100%;
      height: 300px;
      border: 1px solid gray;
      box-sizing: border-box;
      overflow: hidden;
    }
   ::v-deep .el-dialog {
      min-width: 550px;
    }
   ::v-deep .el-dialog__body {
      padding: 10px;
    }
// ::v-deep .tangram-suggestion-main {
//   z-index: 99999999;
//   width: 200px !important;
// }
  </style>